制作css动画

CSS动画基础

CSS动画通过@keyframes规则和animation属性实现。定义关键帧后，将动画绑定到元素上。

@keyframes example {
  0%   {background-color: red;}
  50%  {background-color: yellow;}
  100% {background-color: blue;}
}

div {
  animation-name: example;
  animation-duration: 4s;
}

关键属性说明

animation-name: 指定@keyframes名称
animation-duration: 动画持续时间（如2s）
animation-timing-function: 速度曲线（如ease-in-out）
animation-delay: 延迟启动时间
animation-iteration-count: 播放次数（infinite表示无限循环）
animation-direction: 播放方向（如alternate反向交替）

复合写法

所有属性可简写为：

animation: example 3s ease-in 1s infinite alternate;

顺序为：名称 持续时间 速度曲线 延迟 次数 方向。

变换动画示例

结合transform实现旋转/缩放：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

img {
  animation: spin 2s linear infinite;
}

性能优化建议

优先使用transform和opacity属性，这两个属性不会触发重排（reflow），可通过GPU加速。避免动画中频繁修改width/height等布局属性。