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指动画执行偶数次时向前播放,奇数次时向后播放*/
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。