css如何制作动画

使用CSS关键帧动画（@keyframes）

通过@keyframes定义动画序列，结合animation属性实现。定义动画名称、持续时间、延迟、循环方式等。

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.element {
  animation: slideIn 1s ease-in-out 0.5s infinite alternate;
}

过渡动画（transition）

通过状态变化触发平滑过渡效果。需定义过渡属性、持续时间、速度曲线和延迟。

.button {
  background: blue;
  transition: background 0.3s ease, transform 0.2s;
}
.button:hover {
  background: red;
  transform: scale(1.1);
}

使用CSS变换（transform）

结合transform属性实现位移、旋转、缩放等效果，常与动画或过渡配合使用。

.box {
  transform: rotate(45deg) scale(0.8);
}

控制动画播放状态

通过animation-play-state暂停或运行动画，适合交互控制。

.element {
  animation-play-state: paused;
}
.element:hover {
  animation-play-state: running;
}

多动画组合

对同一元素应用多个动画，用逗号分隔。

.element {
  animation: fadeIn 2s, bounce 1s 2s infinite;
}

性能优化建议

优先使用transform和opacity属性，避免触发重排。硬件加速可通过will-change或translate3d实现。

.optimized {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}