css动画之animation

相对于脚本驱动动画的优势

• 更加快捷方便
• 在中等系统中加载性能比js好
• 将动画序列交给浏览器控制，让浏览器对性能优化

animation的配置
我们使用animation属性及其子属性对需要应用动画的元素进行设定，但是实际的展现形式将在@keyframe中定义

子属性
animation-name：动画名称（在@keyframes时使用）
animation-duration:完整动画的周期
animation-timing-function：动画的时间函数，在transition中已经列举
animation-delay：动画拖延时间
animation-iteration-count：动画循环次数，infinite无限循环
animation-direction：完成一次动画时，动画是改变方向还是从起点重复，alternate时轮流返向播放
连贯写法：animation: name duration timing-function delay iteration-count direction;

keyframes
- 如果两个关键帧（开始到结束），我们可以使用from和to两种状态，或者0%到100%
- 如果是多个关键帧，我们只能通过百分比的方式来定义动画每个关键帧的状态

我们还可以给动画设置多个属性值

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;