CSS实现动画的几种方式

在前端开发中，CSS 是实现动画效果非常强大且高效的工具。以下是几种主流的 CSS 动画实现方式，它们各有特点，适用于不同的场景。

实现方式	核心概念	适用场景	关键属性/规则
CSS Transition	在属性值变化时提供平滑的过渡效果。	简单的交互效果（如鼠标悬停、焦点状态）。	`transition`
CSS Animation	通过关键帧精确控制动画序列的每一步。	复杂的、需要重复或交替的动画。	`@keyframes`, `animation`
Transform	对元素进行几何变换（移动、旋转、缩放等）。	改变元素的形状、位置和方向，常与上述两种方式结合。	`transform`

1. 过渡动画

transition 是一种简单的动画方式，用于在 CSS 属性值发生变化时，在一定时间内平滑地过渡，而不是瞬间改变。

你需要指定哪些属性需要过渡、过渡的持续时间、速度曲线以及是否要有延迟。

css 复制代码

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* 指定对 `width` 属性应用过渡，时长1秒，使用ease速度曲线 */
  transition: width 1s ease;
}

.box:hover {
  width: 300px; /* 鼠标悬停时，宽度在1秒内平滑变为300px */
}

2. 关键帧动画

当需要实现比过渡更复杂、更精细的动画时（比如需要多个中间状态或循环播放），animation 配合 @keyframes 规则是更好的选择。

使用 @keyframes 定义动画序列：在关键帧中，你可以使用百分比来定义动画在不同阶段的状态。
将动画应用到元素 ：使用 animation 属性或其子属性（如 animation-name, animation-duration 等）来绑定定义好的关键帧动画。

css 复制代码

/* 1. 定义一个名为'slideIn'的关键帧动画 */
@keyframes slideIn {
  0% {
    transform: translateX(-100%); /* 开始时在左侧看不见 */
    opacity: 0;
  }
  100% {
    transform: translateX(0); /* 结束时移动到原始位置 */
    opacity: 1;
  }
}

/* 2. 将动画应用到元素上 */
.element {
  animation: slideIn 1.5s ease-in-out 0.5s infinite alternate;
  /* 等同于：
  animation-name: slideIn;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite; // 无限循环
  animation-direction: alternate; // 交替播放
  */
}

3. 变换效果

transform 属性本身不会使元素产生动画，但它通常是动画的核心部分。它用于对元素进行旋转、缩放、倾斜或平移。结合 transition 或 animation，可以创造出丰富的动态效果。

css 复制代码

.button {
  transform: rotate(0deg);
  transition: transform 0.3s;
}

.button:hover {
  transform: rotate(15deg); /* 鼠标悬停时按钮旋转15度 */
}

🚀 提升动画性能的技巧

为了让动画运行得更流畅，避免卡顿，可以关注以下两点：

使用触发GPU加速的属性 ：优先使用 transform 和 opacity 这类属性来实现动画。它们的改动由合成器处理，效率极高，能显著提升性能。
强制硬件加速 ：在某些情况下，可以主动触发GPU加速。例如，对动画元素添加 transform: translate3d(0, 0, 0); 或 transform: translateZ(0); 规则，这会使浏览器调用GPU进行渲染，让动画更流畅，尤其在移动端。

总结

选择哪种方式主要取决于你的动画需求：

对于简单的状态切换 （如按钮悬停），使用 transition。
对于需要多个中间状态、循环播放或更复杂序列 的动画，使用 @keyframes 和 animation。
transform 是实现元素形变和位移的首选工具，应与上述两种方式结合使用。