css3动画属性

2D转换 transform*/
transform: translate(-20px, -20px); /*坐标内移动*/
transform: rotate(45deg); /*旋转*/
transform: scale(0.8); /*缩放*//*给定的宽度（X 轴）和高度（Y 轴）参数
transform: skew(0, 20deg); /*倾斜*/
transform: matrix(0, 0, 0, 0, 0, 0); /*把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素*/
 
/*3D转换*/
transform: rotateX(120deg); /*元素围绕其 X 轴以给定的度数进行旋转*/
transform: rotateY(120deg); /*元素围绕其 Y 轴以给定的度数进行旋转*/
 
/*transition 过渡效果*/
transition-property: all; /*执行动画对应属性 color background*/
transition-duration: 5s; /*动画持续时间*/
transition-timing-function: linear; /*动画变化的速率 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier */
transition-delay: 5s; /*延迟多久开始动画*/
transition: all 5s linear 5s;
 
/*animation 动画*/
animation-name: name;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 5s;
animation-iteration-count: infinite; /*指定元素播放动画的循环次数 infinite | */
animation-direction: normal; /*指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。*/
animation-play-state: paused; /*控制元素动画的播放状态*/
animation: name 5s linear 5s infinite normal paused