Animation基础和写法

1.动画名称（name） --@keyframes
2.过度时间（duration）延迟时间（delay）
3.时间函数（timing-function）
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
值 描述
Reverse 动画反向播放
Alternate 动画在奇数次（1,3,5）正向播放，在偶数次（2,4,6）反向播放
Alternate-reverse 动画在偶数次（1,3,5）正向播放，在奇数次（2,4,6）反向播放
Initial 设置该属性为他的默认值
Inherit 从父元素继承改属性

animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]
[ animation-name ]：检索或设置对象所应用的动画名称
[ animation-duration ]：检索或设置对象动画的持续时间
[ animation-timing-function ]：检索或设置对象动画的过渡类型
[ animation-delay ]：检索或设置对象动画延迟的时间
[ animation-iteration-count ]：检索或设置对象动画的循环次数
[ animation-direction ]：检索或设置对象动画在循环中是否反向运动
[ animation-play-state ]：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式
Css3动画的发展
2012年9月4号。IE10开始能兼容动画，但是在2013年10月17才实现浏览器的监听。晚了一年
2010年1月25号。Chrome 4 开始兼容
2011年1月25。Fireforx 5 开始兼容
时间函数-非线性
1.能够实现动画的阶跃式变化，不是线性的过渡
2.Steps（1，start | end）
3.Steps作用的是每个关键帧，而不是整个时间
监听事件
animationstart
animationend
transitionend
animationitertion