css3动画

transition的四个属性
    transition-property:css的属性name    
    trasnsition-duration:transiton效果完成所用的时间
    transiton-timing-function:transiton效果的方式
        ease:先快后慢    最后非常慢 
        linear:匀速
        ease-in:速度越来越快
        ease-out:速度越来越慢
        ease-in-out:速度先快后慢
    transiton-delay:延迟时间    多少时间后再执行动画

 

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name    指定要绑定到选择器的关键帧的名称   @keyframe name
animation-duration    动画指定需要多少秒或毫秒完成
animation-timing-function    设置动画将如何完成一个周期
animation-delay    设置动画在启动前的延迟间隔。
animation-iteration-count : n  (次数)  infinite(无穷次) 定义动画的播放次数。
animation-direction:指定是否应该轮流反向播放动画。

   normal ：默认值。动画按正常播放    
   reverse：动画反向播放
   alternate ：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
   alternate-reverse：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放    
   initial：设置该属性为它的默认值，请参考 initial
   inherit：从父元素继承该属性，请参考 inherit

animation-fill-mode    规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state    指定动画是否正在运行或已暂停。
initial    设置属性为其默认值
inherit    从父元素继承属性