html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>时代Java与您共同学习(NowJava.com)</title> 6
<style> 7
div8
{9
width:100px;10
height:100px;11
background:red;12
position:relative;13
animation:mymove 2s 2;14
15
/* Safari、Chrome 和 Opera */16
-webkit-animation:mymove 2s 1;17
}18
19
@keyframes mymove20
{21
from {left:0px;}22
to {left:200px;}23
}24
25
/* Safari、Chrome 和 Opera */26
@-webkit-keyframes mymove27
{28
from {left:0px;}29
to {left:200px;}30
}31
</style>32
33
</head>34
<body>35
36
<p>点击“尝试一下”按钮，让 DIV 元素在动画完成时保持最后一个关键帧设置的样式：to {left:200px;}。</p>37
38
<button onclick="myFunction()">尝试一下</button>39
40
<script>41
function myFunction()42
{43
document.getElementById("myDIV").style.animationFillMode = "forwards";44
// 针对 Chrome、Safari 和 Opera 的代码45
document.getElementById("myDIV").style.WebkitAnimationFillMode = "forwards";46
}47
</script>48
49
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java