css动画制作步骤

创建CSS动画的基本方法

使用@keyframes规则定义动画序列，通过百分比或from/to关键字描述动画各阶段的状态变化。

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

应用动画到元素

通过animation属性将定义好的动画绑定到目标元素，需指定动画名称和持续时间。

.element {
  animation: slideIn 1s ease-in-out;
}

控制动画播放方式

通过子属性精细控制动画行为：

• animation-iteration-count: 设置循环次数（infinite表示无限循环）
• animation-direction: 控制播放方向（alternate实现往返效果）
• animation-fill-mode: 定义动画结束后的状态（forwards保留最后一帧）

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

实现关键帧多状态

在@keyframes中使用百分比定义复杂动画序列，可插入多个中间状态。

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

响应式动画触发

结合伪类或JavaScript事件触发动画，增强交互性。例如悬停触发：

.button:hover {
  animation: pulse 0.5s ease-out;
}

性能优化技巧

优先使用transform和opacity属性，这些属性不会触发重排重绘。避免在动画中使用width、height等会引发布局变化的属性。

/* 高性能动画 */
@keyframes fadeScale {
  to {
    transform: scale(1.2);
    opacity: 0;
  }
}