css动画制作步骤

创建CSS动画的基本方法

使用@keyframes规则定义动画序列，指定从开始到结束的样式变化。例如：

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

将动画应用到元素需使用animation属性组合：

.element {
  animation: fadeIn 2s ease-in-out;
}

关键属性详解

animation-name：绑定@keyframes名称
animation-duration：动画持续时间（如3s）
animation-timing-function：速度曲线（ease,linear等）
animation-delay：延迟启动时间
animation-iteration-count：重复次数（infinite表示无限循环）
animation-direction：播放方向（alternate反向交替）
animation-fill-mode：设置结束后的样式状态

多关键帧控制

百分比定义复杂动画阶段：

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

性能优化建议

优先使用transform和opacity属性，这些属性不会触发重排。避免在动画中使用box-shadow或filter等高性能消耗属性。启用硬件加速可通过：

.element {
  transform: translateZ(0);
}

响应式动画技巧

通过媒体查询调整动画参数：

@media (max-width: 768px) {
  .element {
    animation-duration: 1s;
  }
}

调试工具

Chrome DevTools的Animations面板可录制和修改动画时间轴，Firefox的Inspect Tool提供类似功能。