嘿，大家好，我是wawjf
CSS也快结束了，因为上次投票的结果显示大部分人希望我再发表几篇关于复杂选择器的文章，所以我预测我们的CSS教程会在3-4期结束，以后可能会发表一些业余教程作为补充。
今天我们说的也是一个很重要的内容，就是真实的动画。
动画在CSS动画中可谓是一个巨型的存在。当与过渡放在一起时，它就是神的存在。
所以这一期，我们就把重点放在动画上。
lgj，xsb
@keyframes定义关键帧动画-name指定动画名称-duration定义动画播放时间动画-timing-function指定动画曲线动画-delay指定动画-duration-count指定动画播放次数动画-direction指定是否依次反向播放动画。
很多人看到这款手表后一定晕过去了。
但是，这个东西和转场一样，有一个简单的写法，那就是：
Animation:XXXX XX XX XX XX有六个参数，正好对应以上六个参数的顺序。
没错，其实很多人都能发现，这里的以下参数和我们之前讲的有点像：比如animation-delay就是延迟的意思，和transition-delay一模一样。
下面详细说说这六个参数。
p>
首先我们来学习一下做animation最重要的一个东西：定义关键帧
1. @keyframes
这个@keyframes就是来定义关键帧的，这个东西和我们定义CSS的样式一样，也是放在<style>里面，格式比较复杂，是这样的：
@keyframes name{selector{style;}}
挨个解释一下
1）name表示你定义这个动画的名字，随便取，
2）selector表示帧的一个时间位置，也就是整个动画时长的百分比，范围为0%~100%，比如50%就代表是在整个动画运行的中间开始运行这个括号里面的动画
3）style表示定义这个时间点所呈现的内容，格式就像我们平常定义CSS的样式一样，color:red; font-size:40px；等等的都可以
注意，selector可以定义多个，像下面这样：
@keyframes 45s{0%{color:red;}50%{color:blue}}
对了，selector还有一种用法，就是这样：
@keyframes 45s{from{color:red;}to{color:blue}}
这里from表示0%，to表示100%，当我们使用这种格式的时候，就不能再出现类似于50%之类的其他时间点
如果不懂还是什么意思可以询问我们公众号哦
2. animation-name
这个用来引用我们动画的名字，就是你在@keyframes后面自定义的名字，这样系统才可以知道你要启用的动画是哪一个
比如用上面的代码，我们引用就应该这样：
animation-name: 45s;这东西必填，不然系统就不知道你要运行哪个了
3. animation-duration
这东西和之前讲到的transition-duration是一模一样的，定义动画的播放时间，这东西一定要填，不填。。。。动画就没效果了
注意：填写的时间单位为毫秒，比如说你想运行2秒，就应该填2000
1秒=1000毫秒
4. animation-timing-function
animation-delay
这个东西和transition-timing-fuction作用也是一模一样的，如果忘了的话，给你这个链接，先去看看这个吧
CSS教程——第11期
animation-delay也是一样的，也是代表动画触发后延迟的时间
5. animation-itreation-count
这玩意儿更好理解了，就是整个动画重复运行几次，这属性啥啥都好，就是名字恶心点
6. animation-direction
这个也好理解，举个例子，你设定了一个动画，让正方形向右平移100px；如果你开启这个属性，那就是向左100px；总之就是反向运动，一般情况下我们是不用这个属性的，我们只会填normal（关闭反向）如果你要开启反向，那你就填alternate（开启反向）
好了，老规矩，先看实例
上代码：
<!DOCTYPE html><html><head><style>@keyframes mymove{from {left:0px;}to {left:200px;}}div{width:100px;height:100px;background:red;position:relative;animation:mymove 5000 ease-out 1s 1 normal;}</style></head><body><div></div></body></html>
其他的部分不用讲，我们着重的讲<style>的部分
@keyframes mymove{from {left:0px;}to {left:200px;}}div{width:100px;height:100px;background:red;position:relative;animation:mymove 5000 ease-out 1000 1 normal;}
首先是@keyframes部分，这里使用了from to的格式，left表示对象距离左边多少距离，from，即0%，开始的部分，距离左边0px，到结束距离100px;
然后要注意，我们定义了动画的名字是 mymove
@keyframes mymove{from {left:0px;}to {left:200px;}}
然后就是div的部分，这里其实还是可以分成两个部分的：
div{width:100px;height:100px;background:red;position:relative;animation:mymove 5000 ease-out 1000 1 normal;}
首先是基础配置区（第3-6行），这是做基础的定义，定义了对象的宽和高都是100px；颜色为红色，并且定义了一个包含框避免运动的时候到处乱跑
然后就是动画设置区（第7行）：挨个儿讲：
animation:mymove 5000 ease-out 1000 1 normal;-
mymove 就是所谓的动画名称
-
5000表示动画会持续5秒
-
ease-out是一种运动曲线，如果不知道的说明你没看或者忘记了前几期的内容，我再放一次链接：
CSS教程——第11期
4. 1000表示动画的延时，代表开始后要等待一秒动画才会开始
5. normal表示动画不是反向运动
可以发现，这上面属性的顺序和我们讲的顺序必须一模一样，顺序不可以颠倒，也不要省略（其实可以省略，但是作为习惯，我们不会说怎么省略，感兴趣的可以去网上查）
这次我们的内容讲的比较详细，因为animation是CSS里非常重要的一个属性，就和HTML的表单一样，所以下一期我不会讲其他的，我会继续讲关于animation的实例
如果有问题或者建议可以私信公众号哦，我们下期再见~
作者：
wawjf
（我爱微积分）
四五工作室副室长（嗯，我也是）
四五议会 45-2（没想到我是45-2吧）
喜欢研究理科类东西
08年出生，福建福州人，未来的█████
自学微积分，低调低调
本来想研究算法，结果在这边写稿屯图片
关注四五工作室，从零开始学WEB
PS：明天我们会在B站发我们的第一个视频，算上审核时间，大家应该周五或者周六就可以看到啦
B战号：45工作室
