您的位置:首页 > 技术中心 > 前端框架 >

css3怎么设置动画几秒后播放

时间:2022-03-18 16:33

在css3中,可以利用animation-delay属性设置动画几秒后播放,该属性可以设置对象动画的延迟时间,即动画开始前等待的时间,以秒或毫秒计;语法“animation-delay: 数值+单位;”,单位可以是秒(s)或毫秒(ms)。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css3中,可以利用animation-delay属性设置动画几秒后播放。

animation-delay属性可任意检索或设置对象动画的延迟时间,即定义动画什么时候开始。

语法:

  1. animation-delay: time;
  • time:定义动画开始前等待的时间,以秒或毫秒计(值单位可以是秒s或毫秒ms);默认值为0。

提示: 允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。

示例:延迟5秒开始动画

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. div {
  7. width: 100px;
  8. height: 100px;
  9. background: red;
  10. position: relative;
  11. animation: mymove 5s infinite;
  12. animation-delay: 5s;
  13. /*Safari and Chrome*/
  14. -webkit-animation: mymove 5s infinite;
  15. -webkit-animation-delay: 5s;
  16. }
  17. @keyframes mymove {
  18. from {
  19. left: 0px;
  20. }
  21. to {
  22. left: 200px;
  23. }
  24. }
  25. @-webkit-keyframes mymove
  26. /*Safari and Chrome*/
  27. {
  28. from {
  29. left: 0px;
  30. }
  31. to {
  32. left: 200px;
  33. }
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div></div>
  39. </body>
  40. </html>

1.gif

(学习视频分享:css视频教程、web前端)

以上就是css3怎么设置动画几秒后播放的详细内容,更多请关注gxlsystem.com其它相关文章!

热门排行

今日推荐

热门手游