[分享]css3怎么设置动画时间

CSS3是Web开发中重要的一部分，通过它我们可以实现网站的样式更加丰富多彩，其中动画效果是CSS3的重头戏，本文将介绍如何设置动画时间。/设置动画效果/ webkitanimation: mymov...

CSS3是Web开发中重要的一部分，通过它我们可以实现网站的样式更加丰富多彩，其中动画效果是CSS3的重头戏，本文将介绍如何设置动画时间。

/*设置动画效果*/
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
/*其中5s即为动画持续时间*/

/*定义动画*/
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}
@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
} 

如上所示，我们可以通过animation和@keyframes来定义动画，设置动画的持续时间则是通过animation-duration属性来实现，其中时间单位可以是秒（s）或毫秒（ms）。在动画设置中，我们还可以设置动画的播放次数、动画的延迟时间以及动画的速度等，由此可见动画设置是一个非常重要的部分，可以运用到很多场景当中，这里就不一一赘述了。