CSS3动画

动画(animation)是CSS3中具有颠覆性的特征之一，可通过多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

1.动画的基本使用

制作动画分为两步：

1.先定义动画

2.再使用(调用)动画

1.用keyframes定义动画(类似定义类选择器)

 

2.元素使用动画

 

动画序列  

动画常用属性 

 速度曲线细节

animation-timing-function: 规定动画的速度曲线，默认是“ease”

 

动画简写属性

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

· 简写属性里面不包含animation-play-state

· 暂停动画：animation-play-state: paused;  经常和鼠标经过等其他配合使用

· 想要动画走回去，而不是直接跳回来：animation-direction: alternate

· 盒子动画结束后，停在结束位置：animation-fill-mode: forwards