CSS动画（Animation）详解

一、描述
CSS动画允许元素在不同状态之间实现平滑过渡，无需使用JavaScript。通过@keyframes规则定义动画序列，再通过animation属性将动画应用到元素上。与transition相比，动画可以自动播放、循环多次、包含更复杂的中间状态。

二、关键概念解析

1. @keyframes规则
这是动画的核心，用于定义动画在不同时间点的样式状态。

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

/* 或者使用百分比定义更精细的关键帧 */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

2. animation属性组成
这是八个子属性的简写形式：

• animation-name: 指定使用的@keyframes名称
• animation-duration: 动画完成一个周期所需时间
• animation-timing-function: 动画速度曲线（ease、linear等）
• animation-delay: 动画开始前的延迟时间
• animation-iteration-count: 动画播放次数（infinite表示无限循环）
• animation-direction: 动画播放方向（normal、reverse、alternate等）
• animation-fill-mode: 动画前后如何应用样式（forwards、backwards等）
• animation-play-state: 控制动画运行或暂停（running、paused）

三、详细实现步骤

步骤1：定义动画关键帧
首先创建动画的"剧本"，确定起点、中间点和终点的样式：

@keyframes fade-scale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

步骤2：应用动画到元素
将定义好的动画绑定到目标元素：

.box {
  animation: fade-scale 2s ease-in-out 0.5s 3 alternate;
}
/* 等价于：
animation-name: fade-scale;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: 3;
animation-direction: alternate;
*/

步骤3：理解动画方向（direction）

• normal: 每次从头播放（默认）
• reverse: 每次从尾倒放
• alternate: 奇数次正向，偶数次反向
• alternate-reverse: 奇数次反向，偶数次正向

步骤4：控制动画填充模式（fill-mode）
决定动画前后元素如何应用关键帧样式：

• none: 动画前后不应用任何样式（默认）
• forwards: 动画结束后保持最后一帧的样式
• backwards: 动画延迟期间应用第一帧的样式
• both: 同时应用forwards和backwards的效果

四、实际应用示例

示例1：加载动画

@keyframes loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: loading 1s linear infinite;
}

示例2：复杂交互动画

@keyframes slide-bounce {
  0% {
    transform: translateX(-100px) scale(0.8);
    opacity: 0;
  }
  70% {
    transform: translateX(20px) scale(1.1);
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.card {
  animation: slide-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation-fill-mode: both;
}

五、性能优化建议

1. 优先使用transform和opacity属性，它们不会触发重排
2. 避免在动画中修改width、height、margin等会触发布局变化的属性
3. 使用will-change属性预先告知浏览器元素将要变化
4. 对于复杂动画，考虑使用requestAnimationFrame的JS方案

六、浏览器兼容性
现代浏览器普遍支持CSS动画，建议为旧版浏览器添加前缀：

@-webkit-keyframes example { /* Safari/Chrome */ }
@-moz-keyframes example { /* Firefox */ }
@-o-keyframes example { /* Opera */ }

通过掌握这些知识点，你可以创建出丰富多样的交互动效，提升用户体验。