css动画小结

        一.转换
        transform:IE9+
            1.旋转rotate()
            transform:rotate(30deg);
            -ms-transform:rotate(30deg); /* IE 9 */
            -webkit-transform:rotate(30deg); /* Safari and Chrome */
            2.位移translate() 
            tranform：translate();
            3.缩小scale()；
            transform：scela（();
            4.skew()斜切
            transform：skew();
            5.matrix()
            偏移(1,0,0,1,x,y)
            缩放(x,0,0,x,任，任)
            旋转(cosdag,sindag,-sindag,cosdag,0,0)
            拉伸(1,tandag,tandag,1,0,0)
        transform-origin 移动中心点
        二.过渡
        transtion iE10+
        1. transition-property：none 无 ; all 全部 ; property 明确哪一个
        2. transition-duration： time 明确过度所需时间s
        3. transition-timing-function：切换速度
         linear    规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
         ease(默认)    规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
        4.transition-delay：从多少秒后开始
        三.动画
            @keyframes    规定动画。    
            animation    所有动画属性的简写属性，除了 animation-play-state 属性。    
            animation-name    规定 @keyframes 动画的名称。    
            animation-duration    规定动画完成一个周期所花费的秒或毫秒。默认是 0。    
            animation-timing-function    规定动画的速度曲线。默认是 "ease"。   linear平局
            animation-fill-mode    规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。    
            animation-delay    规定动画何时开始。默认是 0。    
            animation-iteration-count    规定动画被播放的次数。默认是 1。infinite永远    
            animation-direction    规定动画是否在下一周期逆向地播放。默认是 "normal"。    
            animation-play-state    规定动画是否正在运行或暂停。默认是 "running"。
        div
            {
                width:100px;
                height:100px;
                background:red;
                animation:myfirst 5s;/*规定了名字 和运行时间*/
                -moz-animation:myfirst 5s; /* Firefox */  
                -webkit-animation:myfirst 5s; /* Safari and Chrome */
                -o-animation:myfirst 5s; /* Opera */
            }
            
            @keyframes myfirst /*定义名字*/
            {
                0%   {background:red;}
                25%  {background:yellow;}
                50%  {background:blue;}
                100% {background:green;}
            }
            
            @-moz-keyframes myfirst /* Firefox */
            {
                0%   {background:red;}
                25%  {background:yellow;}
                50%  {background:blue;}
                100% {background:green;}
            }
            
            @-webkit-keyframes myfirst /* Safari and Chrome */
            {
                0%   {background:red;}
                25%  {background:yellow;}
                50%  {background:blue;}
                100% {background:green;}
            }
            
            @-o-keyframes myfirst /* Opera */
            {
                0%   {background:red;}
                25%  {background:yellow;}
                50%  {background:blue;}
                100% {background:green;}
            }