码迷,mamicode.com
首页 > Web开发 > 详细

CSS六...

时间:2016-08-16 00:24:22      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:

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,...
}

 

CSS六...

标签:

原文地址:http://www.cnblogs.com/lss-bk/p/5774603.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!