前言
css动画个人感觉算是css中比较有趣且花样很多的一个属性，我们常常利用css来做一些页面的动画效果
动画和过渡有什么不同
最大的不同之处在于，过渡往往是需要借助用户的某些动作才能进行触发，且一般来说过渡产生的动画效果只会进行一次。（比如过渡效果是发生在鼠标悬停事件之后，那么鼠标移开之后，过渡效果就会结束）但动画则不需要依赖用户的动作，可以单独在页面上执行，且我们可以自定义动画执行的次数，灵活度更高。
一、定义关键帧
如果是对电影或者影视作品拍摄手法有所了解的读者可能会知道，我们之所以可以在电视上看到“会动的人”，本质上是在一定的时间内闪过了很多个图片帧，每个图片帧都有细微的变化，组合起来就在我们的眼中形成了动画的效果。CSS中的动画也是如此，我们需要设置动画开始和结束时的关键帧，即定义好动画开始和结束时的样式状态，然后css则会根据动画的具体配置来自动实现起始帧和结束帧的过渡。
我们使用@keyframes关键字来定义关键帧，需要可以在关键字后面输入动画的名称，比如这里的test就是动画的名称，我们在动画中，使用from和to这两个属性来定义起始帧和结束帧，这两个属性也可以使用0%和100%来代替。
@keyframes test {
/* from表示动画的开始位置 也可以使用 0% */
from{
margin-left: 0;
background-color: orange;
}
/* to动画的结束位置 也可以使用100%*/
to{
background-color: red;
margin-left: 700px;
}
}
Tips
如果想要实现更加复杂，灵活性更高的动画，我们还可以在动画中定义不同进度的样式，比如设置10%，20%这些过程节点的具体样式，这样可以丰富和完善动画的细节。
二、动画的属性
（一）animation-name
animation-name是用于指定要对当前元素生效的关键帧的名字，比如我们定义了一个名为test的关键帧，那么这里就应该写animation-name: test;
单纯的定义animation-name属性并不能使动画生效，我们还需要动画的执行时间animation-duration配合使用，才能看到动画效果
（二）animation-duration
表示动画的执行时间，时间越长，单次的动画执行时间就越久。
（三）animation-delay
表示动画的延迟执行时间，和过渡属性的延迟时间差不多
（四）animation-iteration-count
表示动画执行的次数，infinite表示无限次执行，对于一些需要一直存在的动画，我们有时候就会需要用到这个属性。
（五）animation-direction
这个属性用于指定动画运行的方向
| 可选值 | 含义 |
|---|---|
| normal | 默认值 从 from 向 to运行 每次都是这样 |
| reverse | 从 to 向 from 运行 每次都是这样 |
| alternate | 从 from 向 to运行 重复执行动画时反向执行 |
| alternate-reverse | 从 to 向 from运行 重复执行动画时反向执行 |
（六）animation-fill-mode
这个属性用于定义动画的填充模式，可选参数如下：
| 可选值 | 含义 |
|---|---|
| none | 默认值 动画执行完毕元素回到原来位置 |
| forwards | 动画执行完毕元素会停止在动画结束的位置 |
| backwards | 动画延时等待时，元素就会处于开始位置 |
| both | 结合了forwards 和 backwards |
（七）animation-play-state
这个属性用于设置动画的执行状态，我们有时候会遇到类似鼠标悬停动画停止这样的需求，这种情况下我们就可以使用这个属性来完成暂停的效果了。
| 可选值 | 含义 |
|---|---|
| running | 默认值 动画执行 |
| paused | 动画暂停 |
（八）animation
如果觉得一个个动画属性分别书写太麻烦，可以直接用animation属性来进行简写，语法如下：
animation: name duration timing-function delay iteration-count direction fill-mode;
三、一个小案例
我们可以利用上面的属性来简单做一个小案例
html内容
<div class="box1">
<div class="box2"></div>
</div>
css内容
*{
margin: 0;
padding: 0;
}
.box1{
width: 800px;
height: 800px;
background-color: silver;
overflow: hidden;
}
.box1 div{
width: 100px;
height: 100px;
margin-bottom: 100px;
margin-left: 10px;
}
.box2{
background-color: #bfa;
animation-name: test;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.box1:hover div{
animation-play-state: paused;
}
@keyframes test {
from{
margin-left: 0;
background-color: orange;
}
to{
background-color: red;
margin-left: 700px;
}
}
效果图：
案例演示.gif
至此，本篇文章对于css的动画就介绍到这里，想要练习css动画的话，可以看我之前发的2篇文章，里面就使用了css动画来制作一些比较好看的特效。
css动画小练习——3D盒子
css动画小练习——时钟
网友评论