摘要：然而我发现都年了，还有很多同学不会动画。指定动画计时函数，即动画的速度曲线，默认是。指定动画播放状态，正在运行或暂停。除了默认值外，还有另外个值，表示，动画完成后，元素状态保持为最后一帧的状态。
今年我面试了很多同学，只要看到简历上写“熟练掌握CSS3”的，我都会问问动画相关知识。然而我发现：都
2019 年了，还有很多同学不会
CSS 动画。
我经常爱问的一个问题是，实现如下的效果：
即，一个小球从向右匀速移动
200px，然后移动回来，再移动过去，最后停留在
200px 处。
动图效果如下：
就是需求这么简单的一个动画，然而绝大多数人却不能答对。
不卖关子，我的答案是：
div{
width: 40px;
height: 40px;
border-radius: 50%;
background: #0ff;
animation: move 2s linear 3 alternate both;
}
@keyframes move{
0%{
transform: translate(0,0);
}
100%{
transform: translate(200px,0);
}
}
大部分面试者说，关于
CSS 动画，也看过一些教程，工作中却不怎么使用，因此就忘了。
这里，我准备为对
CSS 动画掌握不深的小伙伴补充一下相关知识。欢迎大佬们拍板。
正文开始。
通过开发者工具可以发现，
animation（动画）属性是 8 个属性的简写。
这 8 个属性具体含义如下：
| 属性 | 描述 |
|---|---|
| animation-duration | 指定动画完成一个周期所需要时间，单位秒（s）或毫秒（ms），默认是 0。 |
| animation-timing-function | 指定动画计时函数，即动画的速度曲线，默认是 "ease"。 |
| animation-delay | 指定动画延迟时间，即动画何时开始，默认是 0。 |
| animation-iteration-count | 指定动画播放的次数，默认是 1。 |
| animation-direction | 指定动画播放的方向。默认是 normal。 |
| animation-fill-mode | 指定动画填充模式。默认是 none。 |
| animation-play-state | 指定动画播放状态，正在运行或暂停。默认是 running。 |
| animation-name | 指定 @keyframes 动画的名称。 |
下面我们一个个仔细说明，各个动画属性都是用来做什么的，以及需要注意的地方。
CSS 动画，也称关键帧动画。通过
@keyframes 来定义关键帧。
帧的概念，想必大家很清楚，比如电影就是一帧帧图片在播放，利用图像在人脑中短时间停留来形成动态效果。
CSS 动画也是利用这个原理。不过开发者不需要给出每一帧的定义。只需要定义一些关键的帧即可。因为其余的帧，浏览器会根据计时函数插值计算出来。
比如我们一个
div 旋转一圈，只需要定义开始和结束两帧即可：
@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
其中，
rotate 是我给这个动画起的名字，
from 表示最开始的那一帧，
to 表示结束时的那一帧。
准确地说，
CSS 动画用百分比来刻画一个动画周期，
from 其实是
0% 的别称，
to 是
100% 的别称。因此关键帧
rotate 等价于：
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
定义好了关键帧后，下来就可以直接用它了：
animation: rotate 2s;
或者：
animation-name: rotate;
animation-duration: 2s;
通过
animation-name 来指定动画使用的关键帧，这个是必须的。用
JS 来理解的话，相当于：只有变量声明是不行的，还需要使用。
另外上述代码还指定了动画运行的时间
animation-duration 为
2s。最后运行效果如下：
动图的效果不是太明显，方块在旋转时，不是匀速的。因为此时刻画动画速度的属性
animation-timing-function 默认值是
ease，即先快后慢。
下面动图演示了计时函数属性一些值的情形：
animation-timing-function 常见值有：
linear、
ease、
ease-in、
ease-out、
ease-in-out。这些值其实都是
cubic-bezier(n,n,n,n) 的特例。它们被称为贝塞尔曲线。除了开发者工具外，《CSS揭秘》作者也写了的一个在线调试贝塞尔曲线的网站：cubic-bezier.com。贝塞尔曲线这个知识点很有用，
canvas 里也有相应的
API。可以展开的点其实比较多，这里只是初步介绍。
需要提一下，计时函数属性另外的一个好玩的值是
steps 函数，可以用来实现逐帧动画：
计时函数属性介绍到此，后面一律使用值
linear，即表示匀速动画。
回到关键帧，我们除了指定开头和结束位置的关键帧（如果不指定
0% 和
100%，浏览器会自动推断），当然也可以指定任意百分比的帧是什么情况，比如开篇例子的另一种实现：
div{
width: 40px;
height: 40px;
border-radius: 50%;
background: #0ff;
animation: move 6s linear both;
}
@keyframes move{
0%{
transform: translate(0,0);
}
33%{
transform: translate(200px,0);
}
66%{
transform: translate(0,0);
}
100%{
transform: translate(200px,0);
}
}
关键帧代码有冗余，可以进一步简写：
@keyframes move{
0%, 66%{
transform: translate(0,0);
}
33%,100%{
transform: translate(200px,0);
}
}
此时，动画时长改成了
6s，动画进行到三分之一处时，让
div 位于
200px，三分之二回到开始位置，结束时移动到
200px 处。
这种是比较直观的实现方式，有很多面试者一般都会想到这种。
注意
animation: move 6s linear both; 声明中的
both。它是属性
animation-fill-mode 的一个值。这个属性容易被忽略，然而却是
CSS 动画比较重要的一个属性。直译为动画填充模式，具体说的是什么事情呢？
@keyframes 只是定义了动画过程中每一帧的值，然而在动画开始前和动画结束后，元素改处于什么状态呢？
animation-fill-mode 说的就是这个事情。除了默认值
none 外，还有另外 3 个值：
举个例子，
div 从
100px 处移动到
200px 处的关键帧定义为：
@keyframes move{
0%{
transform: translate(100px,0);
}
100%{
transform: translate(200px,0);
}
}
设置填充模式为
forwards 时，动画最后停留在
200px 处：
设置动画延迟
1s 后执行，且填充模式为
backwards 时，可以看到动画在开始前是处于
100px 处，动画结束后回到
0px 处：
最后设置填充模式为
both 的情形：
动画结束后，保持动画最后一帧的状态，这个太有用了，比如我们可以实现一个进度条：
div{
height: 10px;
border: 1px solid;
background: linear-gradient(#0ff,#0ff);
background-repeat: no-repeat;
background-size: 0;
animation: move 2s linear forwards;
}
@keyframes move{
100%{
background-size: 100%;
}
}
效果如下：
上面提到了可以使用
animation-delay 设置延迟时间。不为大家注意的是，延迟可以为负数。负延迟表示动画仿佛开始前就已经运行过了那么长时间。
拿上述进度条为例子，原动画用了
2s 是从
0% 加载到
100% 的。如果设置延迟为
-1s。这动画会从
50% 加载到
100%。仿佛已经运行了
1s 一样：
CSS 动画是可以暂停的。属性
animation-play-state 表示动画播放状态，默认值
running 表示播放，
paused 表示暂停：
animation-play-state 这个属性非常好用，它可以与负延迟一起实现特殊的效果，比如进度条插件：
目前为止还有两个属性没有介绍，一个是
animation-iteration-count 表示动画播放次数。它很好懂，只有一点要注意，无限播放时使用
infinite。另一个是播放方向
animation-direction，它的意思说指定动画按照指定顺序来播放
@keyframes 定义的关键帧。其值有：
示意如下：
animation 属性以及 8 个子属性介绍完了，另外需要说明的是它们与
background 及其各子属性一样，是支持多个值的，即在同一个元素上应用多个动画，送给大家一个如意金箍棒：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/7077.html
摘要：然而我发现都年了，还有很多同学不会动画。指定动画计时函数，即动画的速度曲线，默认是。指定动画播放状态，正在运行或暂停。除了默认值外，还有另外个值，表示，动画完成后，元素状态保持为最后一帧的状态。今年我面试了很多同学，只要看到简历上写熟练掌握CSS3的，我都会问问动画相关知识。然而我发现：都 2019 年了，还有很多同学不会 CSS 动画。 我经常爱问的一个问题是，实现如下的效果： 即，一个...
摘要：无论是还是，对许多应用来说，这个大小都是完全可以接受的。但是为了不用，放弃向后兼容那我觉得还是用得了。自从年双十一正式上线，累计处理了亿错误事件，付费客户有金山软件百姓网等众多品牌企业。 译者按： 看来 jQuery 还是有一些用武之地的。 原文: Why Im Still Using jQuery in 2019 译者: Fundebug 为了保证可读性，本文采用意译而非直译...
摘要：超过的星星，是一个动画库，可以处理属性，单个转换，或任何属性以及对象。超过星星，这个动画库大小只有。超过星星，这个库基允许你以选定的速度为字符串创建打字动画。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 1.Three.js showImg(https://segmentfault.com/img/bVbkQ4X?w=551&h=358); 超过46K的星星，...
摘要：超过的星星，是一个动画库，可以处理属性，单个转换，或任何属性以及对象。超过星星，这个动画库大小只有。超过星星，这个库基允许你以选定的速度为字符串创建打字动画。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 1.Three.js showImg(https://segmentfault.com/img/bVbkQ4X?w=551&h=358); 超过46K的星星，...
摘要：前端最基础的就是。对应，是标签的属性。获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性和。一组包含作为动画属性和终值的样式属性和及其值的集合动画的额外选项。指示是否在效果队列中放置动画。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，...
阅读 420·2023-04-25 19:43
阅读 3612·2021-11-30 14:52
阅读 3408·2021-11-30 14:52
阅读 3339·2021-11-30 14:49
阅读 3272·2021-11-30 14:49
阅读 3515·2021-11-29 11:00
阅读 3483·2021-11-29 11:00
阅读 3514·2021-11-29 11:00
