脚本宝典收集整理的这篇文章主要介绍了css3怎么设置动画几秒后播放,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在css3中,可以利用animation-delay属性设置动画几秒后播放,该属性可以设置对象动画的延迟时间,即动画开始前等待的时间,以秒或毫秒计;语法“animation-delay: 数值+单位;”,单位可以是秒(s)或毫秒(ms)。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
在css3中,可以利用animation-delay属性设置动画几秒后播放。
animation-delay属性可任意检索或设置对象动画的延迟时间,即定义动画什么时候开始。
语法:
animation-delay: time;
time:定义动画开始前等待的时间,以秒或毫秒计(值单位可以是秒s或毫秒ms);默认值为0。
提示: 允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。
示例:延迟5秒开始动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; background: red; posITion: relative; animation: mymove 5s infinite; animation-delay: 5s; /*Safari and Chrome*/ -webkit-animation: mymove 5s infinite; -webkit-animation-delay: 5s; } @keyframes mymove { From { left: 0px; } to { left: 200px; } } @-webkit-keyframes mymove /*Safari and Chrome*/ { from { left: 0px; } to { left: 200px; } } </style> </head> <body> <div></div> </body> </html>
(学习视频分享:css视频教程、web前端)
以上就是css3怎么设置动画几秒后播放的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的css3怎么设置动画几秒后播放全部内容,希望文章能够帮你解决css3怎么设置动画几秒后播放所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。