css动画制作原理

CSS动画制作原理

CSS动画通过关键帧（@keyframes）和动画属性（如animation-name、animation-duration等）实现。其核心原理分为两部分：定义动画序列和控制动画行为。

关键帧（@keyframes）

关键帧用于定义动画的中间状态。通过百分比或from/to指定动画在不同时间点的样式变化。例如：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

动画属性

通过以下属性将关键帧应用到元素并控制动画行为：

• animation-name: 绑定关键帧名称。
• animation-duration: 设定动画持续时间（如2s）。
• animation-timing-function: 控制速度曲线（如ease-in-out）。
• animation-delay: 设置延迟启动时间。
• animation-iteration-count: 定义播放次数（infinite表示无限循环）。
• animation-direction: 控制播放方向（如alternate往返播放）。
• animation-fill-mode: 指定动画结束后的样式状态（如forwards保留最后一帧）。

示例代码

.box {
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-delay: 1s;
}

硬件加速优化

为提高性能，可通过transform和opacity属性触发GPU加速：

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

复合动画

通过组合多个关键帧和属性实现复杂效果：

@keyframes moveAndFade {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(50px); opacity: 0.5; }
  100% { transform: translateY(100px); opacity: 0; }
}