嘿大家好我是wawjf
CSS也接近收尾了，因为上次的投票结果显示，多数人想让我再出几期有关复杂的选择器的文章，所以我预估我们的CSS教程会在3-4期内结束，以后我们可能会出一些番外教程作为补充
今天，我们讲的也是非常重要的内容，那就是：真正的动画 animation
animation可谓是CSS动画中的巨巨存在，和transition放一起那简直就是天神的存在
所以这期我们就来着重的讲一讲animation
lgj,xsb
| @keyframes | 定义关键帧 |
| animation-name | 规定动画名称 |
| animation-duration | 定义动画播放时间 |
| animation-timing-function | 规定动画的运动曲线 |
| animation-delay | 规定动画开始的延迟 |
| animation-itreation-count | 规定动画播放的次数 |
| animation-direction | 规定是否轮流反向播放动画 |
很多人看到这个表之后，肯定已经晕了
但是，这个东西和transition一样，也有简便写法，那就是：
animation:XX XX XX XX XX XX一共六个参数，刚好对应上面六个的顺序
对了，其实很多人可以发现，我们这里面的一下参数和我们之前讲transition是有点一样的，比如animation-delay表示延迟，和transition-delay是一模一样的
那我们就来详细的讲一讲这六个参数
首先我们来学习一下做animation最重要的一个东西：定义关键帧
1. @keyframes
这个@keyframes就是来定义关键帧的，这个东西和我们定义CSS的样式一样，也是放在
@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(开启反向)
好了，老规矩，先看实例
上代码：
<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>
其他的部分不用讲，我们着重的讲
@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工作室
614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
