CSS3中动画涉及到三个属性，一个是Transform：变形；一个是Transition：过渡，一个是Animation：动画。其中Transform、Animation可以搭配着使用，实现复杂动画，Transition可以实现简单动画。
有时候，Transition过渡不能解决我们想要的动画效果，我们希望动画的过渡程度更加复杂有层次，这个时候就要用到Animation。
当然CSS3中的Animation与HTML5中的Canvas绘制动画又不同，Animation只应用在页面上已存在的DOM元素上，做出来的动画相比较Flash、JavaScript及jQuery制作出来的动画效果稍显粗糙些。
Animation有下面这些属性：
| 属性 | 描述 |
|---|---|
| animation | 简写属性，用于在一个属性中设置8个动画属性 |
| animation-name | 规定需要绑定到选择器的keyframe名称 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。跟transition一样。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。默认1，也可以是infinite无限次 |
| animation-direction | 规定是否应该轮流反向播放动画。值为nomal\reverse\alternate\alternate-reverse。意思分别是正方向\反方向\往返\反方向的往返。 |
| animation-fill-mode | 规定动画开始的时候是否要保持开始的第一帧，结束是否保持最后一帧。其值为none\backwards\forwards\both。分别意思是不保持，开始保持，结束保持，和都保持。通常情况下是both设置。 |
| animation-play-state | 规定动画暂停还是播放，值为paused\running。一般搭配鼠标hover时候使用，比如鼠标移上去就动了的效果，就设置running。 |
（1）语法
animation:none;animation:abc 2s ease 0s 1 nomal none running;animation:abc 2s;animation:abc 1s 2s both,abcd 2s both;
其中abc就是keyframe名称。keyframe是什么呢？我们把他叫做“关键帧”，玩过flash的朋友可能对这东西不会陌生。前面我们在使用transition制作transition过渡效果时，就包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率。
如果我们要控制的更细一些，比如要第一个时间段执行什么动作，第二个时间段执行什么动作，换到flash中说，就是第一帧执行什么动作，第二帧执行什么动作，这样用Transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。
如何定义keyframe的名称呢？有两种写法：
@keyframes abc{ from{opacity:1;height:100px;} to{opacity:0.5;height:200px;}
}
@keyframes abc{
0%{opacity:1;height:100px;}
50%{opacity:0.8;height:200px;}
100%{opacity:0.5;height:300px;}
}分别是定义开始的状态属性参数，定义中间的状态属性参数，和定义结束时候的状态属性参数。当然如果属性参数是一样的，我们可以组合起来写，看下面：
@keyframes flash{
0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}定义了keyframes名称用来干嘛呢，就是下面的用处了，把 "keyframes名称" 捆绑到元素中去，比如div。
div {animation:abc 0.5s both;animation:flash 0.5s both;animation:abc 0.5s both,flash 0.5s both;
}Animation可以综合写一行，把所有的表格中的属性按照表格里上下的顺序写，也可以分开Animation的每个属性分开单独写。
（2）实例
.tools_iicon:hover{animation:rotate360 2s;}
@keyframes rotate360{from{transform:rotate(0deg);}to{transform:rotate(360deg);}
}后记：这是原文地址《CSS3新特性(03)：Animation》，欢迎来我个人博客逛逛！
作者：荷小音
链接：https://www.jianshu.com/p/ba3e9b976097
共同学习，写下你的评论
评论加载中...
作者其他优质文章
