动画animation

animation和transition的区别

	transition用于做过渡效果，只有开始和结束状态，被动触发
	animation用于做动画，可以重复主动触发，会有很多的状态

animation是个复合型样式

1. animation-name: 动画名字
2. animation-duration: 动画的持续时间
3. animation-delay: 动画的延时
4. animation-timing-function: 动画的速率
5. animation-iteration-count: 动画运动次数
   默认运动1次，可以写数字，写几次运动几次
   无限运动：infinite 默认动画结束回到起始位置，无限次就不会
6. animation-fill-mode: 动画结束的时候的状态
   forwards : 保留最后的结束状态
   backward : 回到初始位置
7. animation-direction: 动画的方向
   nomal (0–100)
   reverse (100–0)
   alternate (0–100–0) :运动次数到2次以上才能看到效果
   alternate-reverse (100–0--100) :运动次数到2次以上才能看到效果
8. anmition-play-state: 动画的运行状态
   默认是 --running ：运动
   – paused: 停止
   一般配合状态伪类选择器操纵元素的动画状态