别装了！CSS动画实战指南：让你的页面活起来

本文链接：https://blog.csdn.net/zhaodash97/article/details/137844871

本文介绍了CSS动画的基础应用，包括如何使用animation属性创建动画，贝塞尔曲线实现自然运动，以及结合伪类增强交互效果。同时强调了性能优化，特别是transform和opacity在动画中的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

别装了！CSS动画实战指南：让你的页面活起来

在现代网页设计中，CSS 动画已成为吸引用户注意力的重要手段。简直就是网页界的"活力剂"，没有它，你的网页可能就像是一碗没加盐的白粥——虽然养人，但毫无味道。本文将带你一探究竟，如何使用 CSS 动画给你的网页加点"料"，让它活起来！

CSS 动画基础

首先，得知道 CSS 动画是怎么一回事。简单来说，CSS 动画就是通过CSS的animation属性来实现的，它可以让元素从一个样式逐渐变化到另一个样式。你只需要指定动画的名称、持续时间、延迟时间、次数等参数，就能让元素动起来。

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

上面的代码将让一个div的背景颜色在4秒内从红色过渡到黄色。是不是很简单？

让动画更自然：贝塞尔曲线

大家都知道，自然界中的运动很少会是匀速的，因此，如果你的动画也是匀速的话，那看起来肯定不够自然。这时候，animation-timing-function属性就派上用场了，它可以让动画的速度变化更加平滑自然。其中，贝塞尔曲线（Cubic Bezier Curve）是一个非常强大的工具，CSS预设了一些如ease、linear、ease-in、ease-out、ease-in-out等值，但你完全可以自定义贝塞尔曲线，让动画效果更符合你的预期。

div {
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

这段代码中的贝塞尔曲线会让动画开始时加速，然后急速减速，最后再加速，听起来是不是有点像跑车的感觉？

交互动画：伪类与动画的结合

动画不仅可以自动播放，还可以通过用户交互来触发。结合伪类如:hover、:focus等，可以让你的动画更具互动性。

button:hover {
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

这段代码会让按钮在鼠标悬停时执行一个“摇晃”的动画，提醒用户可以点击这个按钮。这样的小细节，往往能极大地提升用户体验。

动画性能优化：transform 和 opacity

要知道，不是所有的CSS属性在动画中都表现得那么"体面"。有些属性的变化会引发浏览器的重绘（repaint）和重排（reflow），从而导致动画卡顿。但别担心，transform 和 opacity 这两个属性在硬件加速下运行，能够保证动画的流畅。

div {
  animation: fly 2s infinite;
}

@keyframes fly {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-15px); opacity: 0.5; }
}