HTML/CSS keyframes关键帧动画进阶技巧分享（完整版）

本文不打算把keyframes关键帧动画的所有细节都讲一遍——那既不现实也没必要。我们只聚焦最常用、最容易出错的百分之二十，这部分能解决你百分之八十的问题。

问题一：keyframes关键帧动画的学习路径是怎样的？

优先使用官方文档推荐的方式实现keyframes关键帧动画，不要随意复制来源不明的代码片段。

写keyframes关键帧动画相关代码时，变量命名要能自解释，别用 a、b、c 这类名字。

问题二：有没有可以直接参考的keyframes关键帧动画示例？

参考下面的实现（CSS 加载动画）：

.loading {
  width: 32px;
  height: 32px;
  border: 3px solid #eee;
  border-top-color: #4a7dff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

问题三：用keyframes关键帧动画要注意什么？

1. 文档和代码要同步更新，过期文档比没有文档更害人。
2. 注释要解释「为什么」而不是「是什么」，代码本身已经说明了是什么。

本文从概念、示例到避坑，把keyframes关键帧动画过了一遍。知识只有用起来才有价值，期待在你的项目里见到它的身影。

遇见问题加 QQ23979811 协助处理