首先了解一下 Animation 的基本用法，使用其需要给动画指定一个周期持续的时间，以及动画效果的名称。可以看一下demo
注释：这是一个给透明和背景色属性设置的一个动画过渡效果
实现很简单（具体看到代码中的注释）：
1 .block_wrap { 2 width: 500px; 3 height: 500px; 4 background: #e3e3e3; 5 /*第一个参数为这个动画的持续时间，第二个参数是动画效果的标题，可以理解为定义一个class，不过这是专属于动画的class*/ 6 animation: 4s opacity; 7 margin: 0 auto; 8 } 9 /*动画效果，opacity为效果标题，@keyframes必须要写*/ 10 @keyframes opacity { 11 0% {opacity: 0; background: } 12 25% {opacity: 0.25} 13 50% {opacity: 0.5} 14 100% {opacity: 1; background: red} 15 }
除了代码中的注释，另外还需要说一下，opacity 中，从 0%—100%，这是我们给动画指定的一个持续周期，指定了到哪个程度，动画就按照里面的属性进行展示，这个周期是必须的！
上面是一个很简单的动画，刷新一次页面即展示一次，如果想要重复地展示动画效果呢？简单，只需要添加一个 infinite 关键字 ，可以指定循环次数，将 infinite 关键字换成数字即可。
1 /*添加infinite关键字，使其可重复*/ 2 animation: 4s opacity infinite;
注释：这是一个重复展示的动画效果
动画默认在展示完后回到初始状态，有时想让动画定格在最后状态，可以使用 animation-fill-mode 属性，该属性有三个值
- none：默认值，动画展示完后回到初始状态
- backwards：动画回到第一帧的状态
- forwards：动画定格在最后状态
- both：根据animation-direction 轮流应用forwards和backwards规则
使用：
/*直接在后面添加即可*/ animation: 1s opacity forwards;
下面看一下backwards的效果：
注释：backwards的效果，简单动画时，和none差不多
在上面写demo尝试以上属性时，发现动画循环播放时，其实都是从初始状态开始，那么如果不想这样子呢？有另一个属性 animation-direction 可以定义它的播放，direction 有以下值：
- normal：默认值，对动画播放无状态影响
- alternate：改变其播放方向，先是按照正常播放，接着反方向播放，以此循环
- reverse：动画按照反方向播放
- alternate-reverse：先是反方向播放，接着正方向播放，以此循环
1 .block_wrap { 2 width: 500px; 3 height: 500px; 4 background: #e3e3e3; 5 /*添加infinite关键字，使其可重复,接着更换每个不同值看效果*/ 6 animation: 1s opacity infinite alternate-reverse; 7 margin: 0 auto; 8 } 9 /*动画效果，opacity为效果标题，@keyframes必须要写*/ 10 @keyframes opacity { 11 to { 12 transform: rotate(360deg); 13 } 14 }
可以使用上面这段代码，更换每个值看一下效果。
我们在上一篇，transition的学习中有提到，transition是有简写形式的，也可以分开来写。同理，animation也是可以这样的，全部的属性简写如下：
1 /*第一个为动画持续时间，第二个为动画延迟（delay）时间,第三个为动画效果标题，第四个为动画状态变化速度，第五个为循环次数，第五个为动画状态设置，第六个为动画播放方向*/ 2 animation: 1s 1s opacity linear infinite forwards normal;
分开写也是可以的
1 /*动画标题*/ 2 animation-name: opacity; 3 /*动画持续时间*/ 4 animation-duration: 1s; 5 /*动画状态变化速度*/ 6 animation-timing-function: linear; 7 /*动画延迟（delay）时间*/ 8 animation-delay: 1s; 9 /*动画状态设置*/ 10 animation-fill-mode:forwards; 11 /*动画播放方向*/ 12 animation-direction: normal; 13 /*循环次数*/ 14 animation-iteration-count: infinite;
在了解animation的过程中，发现在使用animation时，往往配合着 @keyframes，个人理解为，它是一个专属于动画的class，它用来定义动画的各个状态，下来了解一下它的写法，上述所用到的写法
1 @keyframes opacity { 2 to { 3 transform: rotate(145deg); 4 } 5 }
1 @keyframes opacity { 2 0% {background: red} 3 25% {background: orange} 4 50% {background: pink} 5 100% {background: black} 6 }
@keyframes opacity { from,to { transform: rotate3d(1,1,1,360deg); } 50% { transform: scale(1.2); } }
另外，需要注意的是，from to，它们其实就是 0%-100%的缩写
到了这里，上面的基本上能满足大部分我们项目中的需求了。但是，animation还有一个很好玩的属性——animation-play-state，但从字面意思上来看，很明显就是动画的播放状态。没错，它就是用来控制动画的播放状态。
它有两个值
- pause：暂停
- running：播放
这是一个很有意思的属性，如若编写一个很复杂的动画，并且动画持续时间特长，配合上这个属性，我们相当于用CSS制作一个小动画片。看一下这个属性的效果：
注释：有了控制播放状态的动画
上面的demo看起来很像是卡顿了，其实并不是，只是用hover来控制了动画的播放状态，所以说这是个很有意思的属性。这一段的代码如下：
1 .block_wrap { 2 width: 300px; 3 height: 300px; 4 background: #e3e3e3; 5 animation: 1s opacity linear infinite forwards normal; 6 /*动画原本的状态是暂停的*/ 7 animation-play-state: paused; 8 margin: 0 auto; 9 } 10 /*动画效果，opacity为效果标题，@keyframes必须要写*/ 11 @keyframes opacity { 12 from,to { transform: rotate3d(1,1,1,180deg); } 13 50% { transform: rotate(45deg);} 14 } 15 /*当鼠标放上来时，动画才会进行*/ 16 .block_wrap:hover { 17 animation-play-state: running; 18 }
以上就是关于CSS Animation的内容了，相信这篇文章的内容能够满足到大部分的动画需求了。
另外，使用的时候，需要注意一些东西，那就是浏览器的兼容问题。有些浏览器并不能够很好兼容，所以在使用时，写法上要是这样的
-ms-animation @-ms-keyframes /* IE 9 */ -moz- /* Firefox */ -webkit- /* Safari 和 Chrome */ -o- /* Opera */