css动画制作原理

CSS动画制作原理

CSS动画通过关键帧（@keyframes）和动画属性（如animation-name、animation-duration）实现动态效果。核心原理分为两部分：定义动画关键帧和绑定动画到元素。

关键帧定义

使用@keyframes规则定义动画序列，指定从开始（0%）到结束（100%）的中间状态。例如：

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

动画属性绑定

通过animation-*系列属性将动画应用到元素：

• animation-name: 指定@keyframes名称。
• animation-duration: 设置动画持续时间（如2s）。
• animation-timing-function: 控制速度曲线（如ease-in）。
• animation-delay: 延迟动画开始时间。
• animation-iteration-count: 定义播放次数（如infinite循环）。

示例：

.element {
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-timing-function: ease-out;
}

动画性能优化

• 优先使用transform和opacity属性，它们可通过GPU加速。
• 避免频繁触发重排（如修改width、margin）。
• 使用will-change提示浏览器优化（如will-change: transform）。

复合动画示例

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

@keyframes slideAndFade {
  0% { transform: translateX(-100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.box {
  animation: slideAndFade 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}