共计 2503 个字符，预计需要花费 7 分钟才能阅读完成。
开始这篇文章之前，假设你从来没有创建过 CSS 动画。但即使你有，也可能有一些内容你之前没有注意到。接着，我们将探索创建的第一个动画，例如链接动画。
CSS 动画看上去可能是一个快速就能用起来，但一旦真正深入了解，它是一个很大主题。因此，本文分为多个部分。
第 1 部分：介绍 CSS 动画，CSS 动画在性能上如何，通过创建一个基本的动画，讲解 @keyframes 组成。
第 2 部分: 掌握了基础知识之后，我们将深入研究 animation 属性可以做的不同事情。这包括一些技巧，如使用 fill-mode 和链接动画。
第 3 部分: 我们总结了一些比较热门的主题，比如在 JavaScript 使用 CSS 变量的一些钩子。还会讨论了是否应该使用 CSS 动画。没错，有些时候使用 CSS 动画 并不总是最好的选择。但是理解这些基础和一些替代方案是有好处的。
开始之前
所有代码都可 这里 获取并且调试，还可以通过 Github 上的获取到源代码。
对于所有动画，我们使用一个 div 元素，除非另有说明。基本标记包括以下内容
本指南的目标是让你轻松从头开始创建自己的 CSS 动画。
那么, 为什么需要动画?
在我们开始创建动画之前，需要知道我们可以用哪些动画属性。我们不能让每个属性都动起来。下面的 MDN 的一篇文章，其中列出了动画化有哪些的属性：
Animatable CSS properties
Lea Verou 也有一个很好的动画属性演示页面：
Animatable: One property, two values, endless possibilities
性能
在动画的属性中，可以根据性能选择一些动画的属性。
例如，使用 transform 可以更好地处理动画元素位置，这个属性都会开启 GPU 硬件加速模式，从而让浏览器在渲染动画时从 CPU 转向 GPU。相反，动画其它一些属性会降低性能。
下面的文章对理解动画性能很有帮助：
High Performance Animations
第一个动画
我们第一个动画是使一个元素旋转 360 度，效果如下：
首先，我们使用 @keyframes 规则创建动画，@keyframes 采用以下结构：
animation-name 是我们给动画起的名字，你可以有一个或多个关键帧选择器。首先取一个动画名为 spin，然后 @keyframes 来创建动画，from 里面放的是动画开始（0%）的样式，to 里面放的是动画结束（100%）的样式，然后把动画绑定到选择器。
我们可以更进一步的优化。from 下的样式对我们的起始的样式没有影响。因此，from 是冗余的，这里可以移除它：
现在，我们需要将动画应用到元素上。我们使用动画属性 animation-name 和 animation-duration
如上是告诉 div 使用动画 spin，持续时间为 2 秒。持续时间可以设置为毫秒 (ms) 或秒(s)。
Animations inspector
我们已经创建了第一个动画。可以在谷歌 Chrome 中引入 Animations inspector。打开谷歌的开发工具接着通过 More Tools 选项选择 Animations 面板。如果动画面板显示“Listening for animations…”，则刷新页面。
刷新后，应该会在动画面板中看到一些东西，那就是我们的动画!
点击动画，我们可以检查它。由于我们现在的动画不是特别复杂，没有太多可检查。但是有了 Animations inspector，我们可以做很多事情。我们可以试验持续时间和延迟以及改变回放速度。最重要的是，我们可以回放动画，而不必刷新整个页面
当我们有很多动画的时候，这变得特别有用。无论是对不同的元素还是对一个元素。
可以在下面这篇文章中阅读更多关于 Animations inspector 的内容。
https://developers.google.com…
这系列文章中，作者建议在演示时动画时使用 Animations inspector。这允许你回放动画和调整他们而无需重新加载页面。
@keyframes
在上列中动画 spin 下，我们使用第一个 @keyframes 规则。
上例中 @keyframes 并没有太多内容。在指定动画名称之后，我们在关键帧选择器中指定动画。关键帧选择器指定动画持续时间的百分比。或者，如前所述，我们可以使用 from 和 to 关键字，它们分别等于 0% 和 100%。
每个选择器都定义了在动画的哪个时间点应该应用的哪个样式。如果我们有指定相同 C SS 样式的选择器，我们可以将它们组合在一起。
让我们从一个简单的例子开始。考虑元素在正方形路径上移动的效果。
我们将把动画命名为 squarePath，这非常有创意 ????
对于本例，元素有四个位置。对于正方形的每一边，我们使用四分之一的动画。因为我们的开始和结束位置是一样的，所以我们可以对这些关键帧选择器进行分组
给元素加上动画及时间
这个就是有一个元素沿着正方形的路径移动。
小结：
我们已经了解了创建和应用动画元素的基本知识。我们还可以检查我们的动画并在浏览器中调整它们。以下是先列出常用的属性，后续文章会介绍：
animation-name：规定 @keyframes 动画的名称
animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function：规定动画的速度曲线。默认是 “ease”
animation-delay：规定动画何时开始。默认是 0
animation-iteration-count：规定动画被播放的次数。默认是 1
animation-direction：规定动画是否在下一周期逆向地播放。默认是 “normal”
animation-play-state：规定动画是否正在运行或暂停。默认是 “running”
animation-fill-mode：规定对象动画时间之外的状态
虽然这将足以让你启动和运行 CSS 动画，但还远的不够，在下一篇中，将深入研究动画的应用以及相关的技巧和技巧。
原文：https://codeburst.io/a-guide-…
你的点赞是我持续分享好东西的动力，欢迎点赞！
一个笨笨的码农，我的世界只能终身学习！
更多内容请关注公众号《大迁世界》！
