小码哥的IT人生

CSS animation-delay 属性 详解

css3基础 2022-07-14 15:51:32小码哥的IT人生shichen

CSS animation-delay 属性

定义和用法

animation-delay 属性定义动画何时开始。

animation-delay 值以秒或毫秒计。

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

另请参阅:

CSS3 教程:CSS 动画

HTML DOM 参考手册:animationDelay 属性

实例

例子 1

等待两秒,然后开始动画:

div {
  animation-delay: 2s;
}

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-delay:2s;
/*Safari and Chrome*/
-webkit-animation:mymove 5s infinite;
-webkit-animation-delay:2s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation-delay 属性。</p>
<div></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

例子 2

负值,请注意动画跳过 2 秒进入动画周期:

div {
  animation-delay: -2s;
}

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-delay:-2s;
/*Safari and Chrome*/
-webkit-animation:mymove 5s infinite;
-webkit-animation-delay:-2s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation-delay 属性。</p>
<div></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

CSS 语法

animation-delay: time;
描述 测试
time 可选。定义动画开始前等待的时间,以秒或毫秒计。默认值是 0。 测试

技术细节

默认值: 0
继承性: no
版本: CSS3
JavaScript 语法: object.style.animationDelay="2s"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit-、-moz- 或 -o- 的数字表示使用前缀的首个版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

完整实例1:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#MyDIV
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s 1;
-webkit-animation:mymove 5s 1;
}
@keyframes mymove
{
from {left:0px;}
to {left:330px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:330px;}
}
div#MyDIV
{
animation-delay:1s;
-webkit-animation-delay:1s;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性:</h2>
<h3>animation-delay:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="1s" checked="checked" />1s</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="2s" />2s</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="5s" />5s</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="-2s" />-2s</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果:</h2>
<div id="DemoArea">
<div id="MyDIV"></div>
</div>
<h2>CSS 代码:</h2>
<pre id="CodeArea">
div#MyDIV
{
animation-delay:<span id="CodeValue">1s</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="MyDIV"
document.getElementById(strId).style.animationDelay=strValue;
document.getElementById(strId).style.WebkitAnimationDelay=strValue;
document.getElementById(strId).style.MozAnimationDelay=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024