标签:
1.animation-name:自定义动画的动画名称,必须与规则@keyframes配合使用,因为动画名称由keyframes定义。
div {
-webkit-animation-name:fromLeftToRight;
animation:fromLeftToRight;
}
2.keyframes:关键帧,一@keyframes开头后面紧跟着动画名加一个花括号。
-webkit-keyframes fromLeftToRight {
from{
margin-left:0;
}
to{
margin-left:100px;
}
}
3.animation duration(动画时间):设置对象动画的持续时间。
div {
animation-duration:1s;
-webkit-animation-duration:1s;
}
4.animation-timing-function:动画的过渡速度类型。
div {
-webkit-animation-timing-function:ease-in;
animation-timing-fucntion:ease-in;
}
5.animation-delay:动画的延迟时间。
div {
-webkit-animation-delay:1s;
animation-delay:1s;
}
6.animation-altertion-count:设置动画的执行次数。
div {
-webkit-animation-iteration-count:2;
animation-iteration-count:2;
}
7.animation-direction:设置动画的执行顺序。
divi {
-webkit-animation-direction:normal/reverse/alternate/alternate-reverse
}
8.animation-play-state:设置动画的状态。
div {
-webkit-animation-play-state:running/paused;
}
9.animation-fill-mode:设置动画时间之外的状态。
div {
animation-fill-mode:none/forwards/backwards/both
}
10.animation:设置动画的复合属性。
div {
animation:animation-name/animation-duration/animation-timing-function/
animation-delay/animation-alteration-count/animation-direction/
animation-fill-mode/animation-paly-state,...
}
标签:
原文地址:http://www.cnblogs.com/lss-bk/p/5774603.html