html运行实例（css_animation-timing-function）-搜寻教程库

代码示例：（标识：css_animation-timing-function）
<!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.animationTimingFunction=strValue;
document.getElementById(strId).style.WebkitAnimationTimingFunction=strValue;
document.getElementById(strId).style.MozAnimationTimingFunction=strValue;

document.getElementById("CodeValue").innerHTML=strValue;
}
//-->
</script>

<style>
div#MyDIV
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;
}

@keyframes mymove
{
from {left:0px;}
to {left:330px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:330px;}
}

div#MyDIV
{
animation-timing-function:linear;
-webkit-animation-timing-function:linear;

}
</style>

</head>

<body>

<div id="SelArea">
<h2>CSS 属性：</h2>

<h3>animation-timing-function:</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="linear" checked="checked" />linear</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="ease" />ease</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="ease-in" />ease-in</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="ease-out" />ease-out</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="ease-in-out" />ease-in-out</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-timing-function:<span id="CodeValue">linear</span>;
}
</pre>
</div>

</body>

<script type="text/javascript">tiy_onload()</script>

</html>