css动画制作原理

CSS动画制作原理

CSS动画通过关键帧（@keyframes）和动画属性（animation）实现动态效果。核心原理包括定义动画序列和控制播放行为。

关键帧（@keyframes）

关键帧规则定义动画的中间状态。通过百分比或from/to指定时间点的样式变化：

@keyframes example {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

动画属性（animation）

将关键帧绑定到元素并控制播放：

• animation-name: 指定关键帧名称
• animation-duration: 动画持续时间（如2s）
• animation-timing-function: 速度曲线（如ease-in-out）
• animation-delay: 延迟启动时间
• animation-iteration-count: 重复次数（infinite表示无限循环）
• animation-direction: 播放方向（alternate可来回播放）

示例代码：

.box {
  animation-name: example;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}

硬件加速优化

使用transform和opacity属性可触发GPU加速，提升性能：

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

复合动画

通过逗号分隔可同时应用多个动画：

.element {
  animation: fade 2s, slide 3s linear 1s infinite;
}