css动画制作原理

CSS动画制作原理

CSS动画通过改变元素的样式属性实现动态效果，依赖关键帧（@keyframes）和过渡（transition）两种核心机制。动画的渲染由浏览器合成层处理，避免重排和重绘以提升性能。

关键帧动画（@keyframes）

定义动画序列中特定时间点的样式状态，通过百分比或from/to指定阶段：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.element {
  animation: fadeIn 2s ease-in-out;
}

过渡动画（transition）

在属性变化时添加平滑效果，需指定属性和持续时间：

.element {
  transition: width 0.5s ease-out;
}
.element:hover {
  width: 200px;
}

性能优化原则

• 优先使用opacity和transform（如平移、旋转），这些属性触发GPU加速。
• 避免频繁修改height、margin等可能引发重排的属性。

硬件加速

通过transform: translateZ(0)强制开启GPU加速，提升复杂动画流畅度：

.element {
  transform: translateZ(0);
}

动画属性控制

• animation-fill-mode：定义动画结束后的状态（如保留最后一帧）。
• animation-iteration-count：设置重复次数或无限循环。

  .element {
  animation: bounce 1s infinite alternate;
  }