css 延迟动画在页面完成加载后 10 秒开始。
css 设置动画在页面完成加载后 10 秒开始。点击“尝试一下”按钮把动画的延迟减少到三秒。
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head> 4
<meta charset="utf-8"> 5
<title>时代Java与您共同学习(NowJava.com)</title> 6
<style> 7
div{8
width:100px;9
height:100px;10
background:red;11
position:relative;12
animation:mymove 5s infinite;13
animation-delay:10s;14
/*Safari、Chrome 和 Opera*/15
-webkit-animation:mymove 5s infinite;16
-webkit-animation-delay:10s;17
}18
@keyframes mymove{19
from {left:0px;}20
to {left:200px;}21
}22
/*Safari、Chrome 和 Opera*/23
@-webkit-keyframes mymove{24
from {left:0px;}25
to {left:200px;}26
}27
</style>28
</head>29
<body>30
31
<p>动画将在页面完成加载后 10 秒开始。</p>32
<p>点击“尝试一下”按钮把动画的延迟减少到三秒。</p>33
<button onclick="myFunction()">尝试一下</button>34
<script>35
function myFunction(){36
document.getElementById("myDIV").style.animationDelay = "3s";37
// 针对 Chrome、Safari 和 Opera 的代码38
document.getElementById("myDIV").style.WebkitAnimationDelay = "3s";39
}40
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java