keyframes 关键帧机制

#一、什么是 @keyframes？

@keyframes 用于定义动画在不同时间点（关键帧）的样式变化；配合 animation 属性应用到元素上。

• 定义动画：使用 @keyframes 声明关键帧序列；
• 应用动画：在选择器中通过 animation / 相关长属性控制表现。

#二、基本语法

复制@keyframes 动画名称 {
  0% {
    /* 动画起点样式 */
  }
  100% {
    /* 动画终点样式 */
  }
}

等价写法（from/to）：

复制@keyframes move {
  from { transform: translateX(0); }
  to   { transform: translateX(200px); }
}

#三、与 animation 属性配合使用

复制.box {
  animation: move 2s linear infinite;
}

#animation/相关长属性

缩写顺序不必完全固定，但时长与延迟的位置有关联：当出现两个时间值时，第一个解析为 duration，第二个为 delay。

#四、进阶示例

#1) 多个中间关键帧

复制@keyframes colorChange {
  0%   { background-color: #f44336; }
  50%  { background-color: #ffeb3b; }
  100% { background-color: #4caf50; }
}

.box {
  width: 100px;
  height: 100px;
  animation: colorChange 3s ease-in-out infinite;
}

#2) 组合多个动画

复制.box {
  animation: move 2s linear infinite, colorChange 3s ease-in-out infinite;
}

#3) 往返播放（alternate）

复制@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(300px); }
}

.box {
  animation: slide 2s ease-in-out infinite alternate;
}

#五、常用技巧

#1) 自定义速度曲线（贝塞尔）

复制animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

#2) 让动画结束后停留在终点

复制animation-fill-mode: forwards;
/* or */
animation: move 2s ease-out forwards;

#3) 延迟与暂停/恢复

复制.box {
  animation: fadeIn 2s ease-out 1s forwards;
  animation-play-state: paused;
}

/* JS 控制 */
document.querySelector('.box').style.animationPlayState = 'running';

#六、关键帧百分比与合并写法

• 百分比表示动画进度点；未显式声明的时间点会在相邻关键帧间插值。
• 可合并多个百分比到同一规则：

复制@keyframes shake {
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80%, 100% { transform: translateX(10px); }
}

#七、命名与作用域

• 名称需符合 CSS 标识符规则（不以数字开头）；
• 全局样式表中为全局可见；Shadow DOM / CSS Modules 等可局部化。

#八、JS 动态控制动画

复制const el = document.querySelector('.box');

// 动态设置动画
el.style.animation = 'move 3s ease-in-out infinite';

// 暂停/恢复
el.style.animationPlayState = 'paused';
el.style.animationPlayState = 'running';

// 移除动画
el.style.animation = 'none';

#九、常见动画案例

#1) 渐隐渐现

复制@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

.fade { animation: fadeInOut 2s ease-in-out infinite; }

#2) 旋转加载

复制@keyframes spin { to { transform: rotate(360deg); } }
.rotate { animation: spin 1s linear infinite; }

#3) Loading 点

复制@keyframes blink {
  0%, 80%, 100% { opacity: 0; }
  40%           { opacity: 1; }
}
.dot { animation: blink 1.4s infinite both; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

#十、浏览器兼容性

生产环境中无需再为现代浏览器添加前缀；仅兼容极旧环境时考虑 -webkit- 等。

#十一、与 transition 的区别

#十二、排错与性能建议

• 动画不生效：检查是否正确绑定 animation-name；确认元素可见；时长不可为 0s；关键帧书写是否被误拼写。
• 闪烁/抖动：尝试为变换类动画使用 transform 而非 top/left，并可添加 will-change: transform;（谨慎使用）。
• 卡顿：减少重排属性；合并多个元素动画到容器；适当降低帧率/时长；避免在同一时间启动大量动画。

#总结

• @keyframes 定义动画轨迹，animation 控制动画行为；
• 合理使用 timing-function、fill-mode、direction 可实现专业级动效；
• 结合 JS 可实现暂停/恢复、条件触发与动态参数。