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)。在动画设置中,我们还可以设置动画的播放次数、动画的延迟时间以及动画的速度等,由此可见动画设置是一个非常重要的部分,可以运用到很多场景当中,这里就不一一赘述了。