本文深入探讨 CSS 动画的核心机制，包括 Animations 和 Transitions，解析它们的区别与应用场景。通过实例展示如何使用关键帧、时间曲线以及 Transform 实现平滑的动画效果，强调 CSS 动画在提升页面性能上的优势。
前言
CSS 的最后一篇，我们来看看 CSS 动画方面的知识。
为什么要把这部分作为一个重点知识来讲呢？因为 CSS 动画作为比较新的特性，实际上并没有被很广泛的运用，很多工程师仍旧习惯用 JS 实现动画效果，而相比 JS，合理使用 CSS 动画，能够有效避免触发浏览器的重排或重绘机制，从而提高渲染效率。
我们知道前端性能优化的核心其实就是改善用户体验，想要页面更加丝滑，渲染流程的优化是一个非常重要的关注点。
CSS 中动画相关的规范均属于 Refining（优化中）的部分，当前状态为 WD。这里补充个背景知识，在 W3C 发布流程中，规范自身状态存在四个阶段，即：
WD（工作草案） -> CR（候选建议书） -> PR（提议建议书） -> REC（建议书）
可以看到，Refining 中的模块基本都是 WD 状态，WD 状态的文档其实是不被官方推荐使用的。
不过照目
订阅专栏 解锁全文
扫一扫
1486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
