CSS3动画
animation动画通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果；相对过渡动画，animation动画可以实现更多变化，更多控制，实现自动播放等效果；
定义动画
制作animation动画需要两个步骤：
第一步，需要先定义动画，0%的时候我们一般建议什么也不要设置，默认就是初始的样式；
@keyframes 动画名称 {
0% {
开始动画
}
100% {
结束动画
}
}
第二步，定义了的动画需要调用才能使用生效，哪一个盒子需要调用动画就设置以下两个必须的属性；
animation-name: 动画名称;
animation-duration: 持续时间（单位是s）;
案例：
/* 定义动画 */
@keyframes move {
0% {}
100% {
transform: translateX(1200px);
}
}
.box {
width: 150px;
height: 150px;
background-color: tomato;
/* 调用 */
animation-name: move;
animation-duration: 2s;
}
动画序列
0%是动画的开始，100%是动画的完成，完成整个动画过程的规则就是动画序列；
动画定义的是也可以用from和to来定义，的等同于0%到100%；
@keyframes中规定某项css样式，将当前的样式逐渐改为新的样式的过程，称之为动画，我们可以改变任意的样式，改变任意的次数；
CSS3动画常见属性
|
属性 |
描述 |
|
@keyframes |
规定动画。 |
|
animation |
所有动画属性的简写属性，除了 animation-play-state 属性。 |
|
animation-name |
规定 @keyframes 动画的名称。（必须有）。 |
|
animation-duration |
规定动画完成一个周期所花费的秒或毫秒。默认是 0。（必须有）。 |
|
animation-timing-function |
规定动画的速度曲线。默认是 "ease"。 |
|
animation-delay |
规定动画何时开始。默认是 0。必须写单位s。 |
|
animation-iteration-count |
规定动画被播放的次数。默认是 1。循环是infinite； |
|
animation-direction |
规定动画是否在下一周期逆向地播放。默认是 “normal”。 alternate逆向 |
|
animation-play-state |
规定动画是否正在运行或暂停。默认是 "running“,暂停是paused。 |
|
animation-fill-mode |
规定对象动画时间之外的状态。保持现状forwards，回到起始backwards。 |
animation-timing-function 的几种设置方式
|
值 |
描述 |
|
linear |
动画从头到尾的速度是相同的。 |
|
ease |
默认。动画以低速开始，然后加快，在结束前变慢。 |
|
ease-in |
动画以低速开始。 |
|
ease-out |
动画以低速结束。 |
|
ease-in-out |
动画以低速开始和结束。 |
|
steps(步数设置) |
让动画在规定的时间里几步完成 |
CSS3动画简写
animation: 动画名称 持续时间 运动曲线 何时开始（延时） 播放次数 是否反向播放 动画结束后的状态
animation: name duration timing-function delay iteration-count direction fill-mode;
注意：
01、动画简写属性的时候，动画名称和动画持续时间必须要书写，其他属性需要就书写不需要就省略，如果书写动画延时必须书写单位s，哪怕是0s也要书写；
02、持续时间和延时的时间有先后顺序；
多个动画同时调用
如果一个元素需要同时调用多个动画我们只需要用一个animation,不同的动画用英文的逗号隔开；
/* animation: bear .3s steps(8) infinite;
animation: move 1s ease forwards; */
animation: bear .3s steps(8) infinite, move 3s ease forwards;
Animate.css动画（重要）
第一步：将animate.css文件复制到自己的项目中，并且引入到自己的项目中；
<link rel="stylesheet" href="./css/animate.css">
第二步：打开动画的预览html页面（https://www.dowebok.com/demo/2014/98/或者在资料发放中找h5第一天中有），复制需要的动画类名，先class调用animated动画类名然后空格紧接着书写动画类名；
<div class="animated bounceInDown"></div>
第三步，设置页面滚动到某一个区域再去加载动画，需要配合wow.js:
01、wow.min.js复制到自己的项目中的js文件夹中；
02.将以下代码复制到自己的页面的最后面
<script src="js/wow.min.js"></script>
<script type="text/javascript">
/*初始化自动动画wow.min.js插件*/
new WOW().init();
</script>
03、哪一个元素需要就在calss中调用wow的类名
第四步，设置动画延时，我们需要自己在css中定义一个延时动画样式
.yanshi1 {
animation-delay: .4s;
}
.yanshi2 {
animation-delay: .8s;
}
.yanshi4 {
animation-delay: 1.2s;
}
.yanshi4 {
animation-delay: 1.6s;
}
