CSS动画示例（上一篇是CSS过渡…）
大家好，欢迎来到雄雄的小课堂，前面，我们将CSS的变形和过渡都整理了，有需要的可以移步这里看：
今天，我们来看看CSS3的动画。
CSS3使用动画分为两个步骤：
1.通过类似flash动画的关键帧来声明一个动画。
2.在animation属性中调用关键帧声明的动画，实现一个更为复杂的动画效果。
接下来我们具体来看看CSS3是如何实现动画的？
01
设置关键帧
在CSS3中，把@keyfreams成为关键帧，这个关键帧可以设置多段属性，其语法为：
@keyfreams name{
from{//CSS代码}
percentage{//CSS 代码}
to{//CSS 代码}
}也可以将from、percentage和to换成百分比，如下：
@keyfreams name{
0%{//CSS代码}
50%{//CSS 代码}
100%{//CSS 代码}
}语法解析：
name:动画的名称，通过该名称来调用该动画
percentage（50%）：是一个百分比，主要用来定义某个时段的动画效果。
下面我们来看一段代码：
Html代码：
<div style="background: darkgoldenrod;" id="div7">CSS样式代码：
/*声明一个动画*/
@keyframes name{
0%{
width: 200px;
height: 200px;
background: yellow;
}
50%{
width: 400px;
height: 400px;
background: green;
}
75%{
width: 500px;
background: black;
}
100%{
width:600px ;
height: 600px;
background: cornflowerblue;
}
}02
调用动画
@keyfreams只是用来声明动画效果的，但是如果不调用它的话，它就不会起什么效果，下面我们来看看怎么通过animation来调用动画。
语法：
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode
语法好长，下面来解释一下吧。
animation-name：调用的动画名称
animation-duration animation-timing-function animation-delay：分别是过渡时间，过渡方式，延迟时间。
animation-iteration-count：动画的播放次数，可以是整数，如果是infine的话，则是无限循环。
animation-direction：动画播放的方向，normal表示向前播放，alternate表示一前一后（播放次数偶数向前播放，奇数则反方向播放）。
animation-play-state：动画的播放状态，running和paused.
下面我们来看看调用动画的代码：
#div7:hover{
animation:name 1s infinite alternate ease-in-out;
}效果如图所示：
往期精彩
点分享
点点赞
点在看
