CSS的时间参数以秒(s)或毫秒(ms)为单位,可以在以下的CSS属性中使用:
animation-duration: 2s; animation-delay: 1s; transition-duration: 0.5s; transition-delay: 0.2s;
animation-duration:它用来设置动画的持续时间,表示动画从开始到结束所用的时间。在上面的例子中,动画的持续时间为2秒。如果省略该属性,默认值是0s,也就是没有动画效果。
animation-delay:它用来设置动画的延迟时间,表示从元素加载完成到动画开始的时间。在上面的例子中,动画延迟1秒后开始播放。如果省略该属性,动画会立即开始播放。
transition-duration:它用来设置过渡效果的持续时间,表示过渡从开始到结束所用的时间。在上面的例子中,过渡效果的持续时间为0.5秒。如果省略该属性,默认值是0s,也就是没有过渡效果。
transition-delay:它用来设置过渡效果的延迟时间,表示从元素加载完成到过渡效果开始的时间。在上面的例子中,过渡效果延迟0.2秒后开始播放。如果省略该属性,过渡效果会立即开始播放。
除了以上的四个属性之外,还有一些其它的属性可以控制动画的时间参数,比如animation-timing-function属性可以用来设置动画的速度曲线,animation-fill-mode属性可以用来设置动画的填充模式等等。总之,在实现CSS动效的时候,合理地配置时间参数,才能让动画效果更加完美。