css3动画制作心得

CSS3动画制作心得

CSS3动画通过@keyframes和animation属性实现，结合硬件加速和性能优化技巧，可创建流畅的视觉效果。

关键帧定义
使用@keyframes定义动画序列，百分比或from/to指定阶段状态。例如：

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

动画属性配置
通过animation简写或分属性控制：

• animation-name: 绑定@keyframes名称
• duration: 动画时长（如2s）
• timing-function: 调速函数（ease-in-out等）
• delay: 延迟启动时间
• iteration-count: 重复次数（infinite为循环）
• direction: 播放方向（alternate反向交替）
• fill-mode: 结束状态保留（forwards保持最后一帧）

.element {
  animation: fadeIn 2s ease-in-out 1s infinite alternate forwards;
}

性能优化
优先使用transform和opacity触发GPU加速，避免频繁重排/重绘：

@keyframes slide {
  to { transform: translateX(100px); } /* 高性能 */
}

避免使用width、margin等属性。

实用技巧

• 使用will-change预声明动画属性提升性能：

  .box { will-change: transform; }

• 通过animation-play-state: paused控制播放暂停。
• 多动画串联：用逗号分隔不同@keyframes名称。

调试工具
Chrome DevTools的Animations面板可录制、慢放和编辑动画时间轴，便于调整细节。