Style animationDelay 属性
改变 <div> 元素的 animationDelay 属性:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>蜜蜂教程(mifengjc.com)</title> <style> div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite; animation-delay: 10s; /*Safari、Chrome 和 Opera*/ -webkit-animation: mymove 5s infinite; -webkit-animation-delay: 10s; } @keyframes mymove { from { left: 0px; } to { left: 200px; } } /*Safari、Chrome 和 Opera*/ @-webkit-keyframes mymove { from { left: 0px; } to { left: 200px; } } </style> </head> <body> <p>动画将在页面完成加载后 10 秒开始。</p> <p>点击“尝试一下”按钮把动画的延迟减少到三秒。</p> <button onclick="myFunction()">尝试一下</button> <script> function myFunction() { document.getElementById("myDIV").style.animationDelay = "3s"; // 针对 Chrome、Safari 和 Opera 的代码 document.getElementById("myDIV").style.WebkitAnimationDelay = "3s"; } </script> <p>请注意,延迟是从页面完成加载后开始计算,而不是从您点击按钮开始计算。</p> <p><strong>注意:</strong>只有 Firefox 支持 animationDelay 属性。</p> <div id="myDIV"></div> </body> </html>
定义和用法
animationDelay 属性定义何时开始动画。
animationDelay 值的单位可以是秒(s)或者毫秒(ms)。
提示:允许使用负值,-2s 表示动画会马上开始,但是从动画的 2 秒处开始播放。
浏览器支持
只有 Firefox 支持 animationDelay 属性。
语法
返回 animationDelay 属性:
object.style.animationDelay
设置 animationDelay 属性:
object.style.animationDelay = "time|initial|inherit"
属性值
值 | 描述 |
---|---|
time | 可选的。定义动画开始前的秒数或毫秒数。默认值为 0。 |
initial | 设置该属性为它的默认值。请参阅 initial。 |
inherit | 从父元素继承该属性。请参阅 inherit。 |
技术细节
默认值: | 0 |
---|---|
返回值: | 字符串,表示元素的 animation-delay 属性。 |
CSS 版本 | CSS3 |
相关文章
CSS 参考手册:animation-delay 属性