CSS中的@keyframes规则详解

1. 知识描述
@keyframes是CSS动画的核心规则，用于定义动画序列中的关键帧（关键状态）。它不直接应用到元素上，而是通过animation-name属性引用，控制元素在一段时间内的样式变化过程。每个@keyframes规则包含：

• 一个自定义的名称（动画名称）
• 多个百分比关键帧（如0%、50%、100%）或from/to关键字
• 每个关键帧内包含该时间点应有的CSS样式

2. 基本语法结构

@keyframes 动画名称 {
  0% { /* 起始状态样式 */ }
  50% { /* 中间状态样式 */ }
  100% { /* 结束状态样式 */ }
}

• 百分比表示动画进度的相对时间点
• from等价于0%，to等价于100%
• 百分比不一定按顺序排列，浏览器会自动按数值排序执行

3. 关键帧的写法细节
3.1 基本百分比写法

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  60% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

说明：元素从左侧完全隐藏开始，60%时稍微向右弹跳，最后停在原位

3.2 from/to简写

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

仅适用于简单起止动画

3.3 多属性同时变化

@keyframes complex {
  0% {
    transform: scale(0.5) rotate(0deg);
    background: red;
  }
  100% {
    transform: scale(1.5) rotate(360deg);
    background: blue;
  }
}

注意：所有可动画属性均可使用

4. 关键帧规则详解
4.1 关键帧重复定义处理

@keyframes test {
  0% { left: 0; }
  50% { left: 100px; }
  0% { top: 0; } /* 合并到0%关键帧中 */
  50% { top: 50px; } /* 合并到50%关键帧中 */
}

浏览器会将相同百分比的关键帧合并，最终0%帧同时有left:0和top:0

4.2 关键帧缺失处理

@keyframes partial {
  0% { opacity: 0; }
  100% { opacity: 1; }
  /* 未定义50%状态，浏览器会自动插值计算 */
}

如果未定义0%或100%，浏览器会使用元素原始样式或前一个关键帧

4.3 关键帧权重冲突

@keyframes conflict {
  0% { color: red; }
  50% { color: green; }
  100% { color: blue; }
  75% { color: yellow; } /* 覆盖之前的定义？不，这是新时间点 */
}

不同百分比的关键帧不会冲突，相同百分比才会合并

5. 实际应用示例
5.1 弹跳动画实现

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

通过多个相同百分比创建弹跳停留效果

5.2 打字机效果

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
@keyframes blink {
  0%, 100% { border-color: transparent }
  50% { border-color: black }
}

组合多个@keyframes创建复杂动画

6. 与animation属性配合
@keyframes必须与animation属性配合使用：

.element {
  animation: slide-in 2s ease-in-out 1s 3 alternate forwards;
  /* 对应：动画名称 时长 缓动 延迟 次数 方向 填充模式 */
}

7. 重要特性

• @keyframes规则没有层叠性，同名规则不会覆盖，而是同时生效
• 可以在一个元素上应用多个@keyframes动画
• 支持所有可动画属性，包括自定义属性
• 关键帧内的!important会被忽略
• 性能优化：避免在@keyframes中修改布局属性（如width/height）

8. 浏览器支持与回退

• 现代浏览器完全支持
• 可配合@supports检测支持情况
• 回退方案：使用transition实现简单动画

总结：@keyframes是CSS动画的时间轴定义工具，通过精确定义关键时间点的样式状态，让浏览器自动计算中间帧，实现平滑的动画效果。掌握其语法规则和特性，能够创建从简单到复杂的各种动画效果。