代码示例:(标识:css_animation-iteration-count)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf8" />
<script type="text/javascript">
<!--
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)
}
//-->
</script>
<script type="text/javascript">
<!--
function test_demo_val(strValue)
{
var strId="MyDIV"
document.getElementById(strId).style.animationIterationCount=strValue;
document.getElementById(strId).style.WebkitAnimationIterationCount=strValue;
document.getElementById(strId).style.MozAnimationIterationCount=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
//-->
</script>
<style>
div#MyDIV
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s 1;
-moz-animation:mymove 5s 1;
-webkit-animation:mymove 5s 1;
-o-animation:mymove 5s 1;
}
@keyframes mymove
{
from {left:0px;}
to {left:330px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {left:0px;}
to {left:330px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:330px;}
}
@-o-keyframes mymove /* Opera */
{
from {left:0px;}
to {left:330px;}
}
div#MyDIV
{
animation-iteration-count:1;
-webkit-animation-iteration-count:1;
}
</style>
</head>
<body>
<div id="SelArea">
<h2>CSS 属性:</h2>
<h3>animation-iteration-count:</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="1" checked="checked" />1</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="2" />2</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="5" />5</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="infinite" />infinite</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-iteration-count:<span id="CodeValue">1</span>;
}
</pre>
</div>
</body>
<script type="text/javascript">tiy_onload()</script>
</html>