css3动画相关

transform-origin设置动画的开始位置

兼容性写法为

 transform-origin:x y z;           /*x,y,z可以是百分比和像素*/
 -webkit-transform-origin:x y z;    /* chrome safari*/
 -moz-transform-origin:x y z;    /*firefox*/
 -o-transform-origin:x y z;     /*Opear*/
 -ms-transform-origin:x y z;   /*IE9+*/

backface-visibility 设置元素旋转到背面时是否可见

兼容性写法以上面类似

backface-visibilit:hidden ;/*不可见*/
backface-visibility：visibility; /*可见*/

定义一组动画过程

@-webkit-keyframes 动画名称{
    from{
        /*动画开始样式*/
    }
    to{
        /*动画结束样式*/
    }
}

@-moz-keyframes 动画名称{
    from{
        /*动画开始样式*/
    }
    to{
        /*动画结束样式*/
    }
}
@-o-keyframes 动画名称{
    0%{
        /*动画开始样式*/
    }
    100%{
        /*动画结束样式*/
    }
}
//0%,from表示动画初始状态，用0%对应100%，from对应to，两者用那组都可以

对元素应用动画

/*css*/

元素{
  -webkit-animation:动画名称 动画一轮时间(从0%-100%) 动画速度曲线 动画播放次数;

}
/*
例如：
-webkit-animation:movesClouds 40s linear infinite;
表示动画一轮时间为40s
速度为线性(速度维持不变)
播放无数次
*/