css3整理--Animation

animation语法：

　　1、动画的定义

　　@keyframes IDENT {

　　　　from { Properties:Properties value; }

　　　　Percentage { Properties:Properties value; }

　　　　to { Properties:Properties value; } }

　　或者全部写成百分比的形式：

　　@keyframes IDENT {

　　　　0% { Properties:Properties value; }

　　　　Percentage { Properties:Properties value; }

　　　　100% { Properties:Properties value; } }

　　其中 IDENT 是动画的名称，语义化即可。

　　from指定动画开始时的属性值，可以使用百分比代替

　　to指定动画结束时的属性值，也可以使用百分比代替

　　Percentag可以指定中间任意多个值，来指定动画的轨迹

　　2、动画的调用

　　animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名，支持指定多个动画，中间逗号分隔*/

　　animation-duration: 10s;/*动画持续时间*/

　　animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/

　　animation-delay: 2s;/*动画延迟时间*/

　　animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/

　　animation-direction: alternate;/*定义动画方式，alternate指动画执行偶数次时向前播放，奇数次时向后播放*/