css3的动画属性有哪些？

css3动画属性与过渡属性有所不同，它不需要事件触发，调用关键帧即可。
制作动画时我们需要先制定关键帧
@keyframes 关键帧的名称{
from{ 开始状态 }
to{ 结束状态 }
}
比较繁琐的动画可采用如下方法指定关键帧：
@keyframes 关键帧的名称{
0%{ 开始状态 }
25%{ 过程状态 }
50%{ 过程状态 }
75%{ 过程状态 }
100{ 结束状态 }
}
注释：百分比可自定义，过程状态个数可自定义。
制定好关键帧以后，可通过animation复合属性在元素css样式中调用相应的关键帧。（animation适用于css2,css3）
animation-name 关键帧的名称
animation-duracion 动画持续的时间
animation-delay 动画的延迟时间
animation-timing-function 动画的运动类型(加速度、减速度、匀速、贝塞尔曲线)
animation-iteration-count 动画运动的次数，默认一次 infinite无限循环
animation-direction 运动的方向
属性值： -reverse 让动画反方向运动
-alternate 让动画先正向运动一次再反向运动一次，持续交替运行
-alternate-reverse 先反向再正向，持续交替运行

常用的复合写法:animation: 属性值1,属性值2,属性值3,属性值4,属性值5,属性值6;

animation-play-state 动画的运行状态 （常用来做鼠标事件）
属性值： pushed 暂停
runing 运行

动画属性配合使用变换属性
1、transform变换属性特点主要用来实现元素的一系列变形。
a、位置的移动 transform:translate();
2D空间中位移参数注释:
当括号中只有一个参数值时，如果数值为正数则向右下方位移；
当括号中有两个数值时则第一个数值表示在X轴上位移的距离，第二个数值表示在Y轴上位移的距离。

单独设置X/Y的位移距离：
transform:translateX();
transform:translateY();

3D空间中位移参数注释：
transform:translate3D(X,Y,Z);表示向X、Y、Z轴分别位移的距离，可以为负数。
单独设置Z轴位移距离：
transform:translateZ(),参数值不能为百分比。
b、旋转（默认绕着中心点进行旋转）transform:rotate();参数单位为deg(角度)
2D空间中旋转：
单独设置围绕某个轴旋转：
transform:rotateX();
transform:rotateY();

3D空间中旋转增加：
transform:rotateZ();
transform:rotate3D(X,Y,Z,a);【0不旋转，1旋转】
X，Y，Z值都为一个0~1之间的数值，主要用来描述元素分别围绕X轴、Y轴、Z轴旋转的矢量值，a为一个角度值，用来指定元素在3D空间旋转的角度，如果值为正的，元素顺时针旋转，如果值为负的，则逆时针旋转。
c、缩放 transform:scale();参数值:（0~1缩小，大于1放大）
transform:(参数1，参数2)；
参数1:X轴缩放的比例；
参数2:Y轴缩放的比例;
注:如果两个参数相同的情况下只写一个
单独设置X/Y
transform:scaleX();
transform:scaleY();
d、倾斜 transform:skew();参数单位为deg(角度)
transform:skew();
单独设置X/Y
transform:skewX();
transform:skewY();

transition 是css3过渡属性,用于平滑的改变css的值，必须通过鼠标事件触发
transition是一个复合属性，属性如下：
transition-property 检索或设置对象中参与过渡的属性
属性值：需要参加过渡的属性 （all 能支持过渡的属性都会过渡变换）
transition-duration 检索或设置对象过渡的持续时间
transition-delay 检索或设置对象延迟的时间
transition-timing-function 检索或设置对象中过渡的运动类型（加速度、减速度、匀速…)
简写形式：transition:属性值1,属性值2,属性值3,属性值4;