animation-play-state - FACESOHO知行者

<script type="text/javascript">
function playit_onload(){
var preval=""
preval=document.getElementById("preselectedValue").value
if (preval!=""){
	change_position(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
			}
		}
		document.getElementById("container").style.display="block";
 }
}
function click_position(obj){change_position(obj.value)}
function change_position(val){
	var s="demoDIV";	
	s="myDIV ";
	s=s.trim();	
	document.getElementById(s).style.animationPlayState=val;	
	document.getElementById(s).style.WebkitAnimationPlayState=val;	
	document.getElementById(s).style.MozAnimationPlayState=val;	
	var x="animation-play-state:<span id='enlargecssprop'>" + val + "</span>";
	var y="div#myDIV { ###CSSPROP###;}";
	var z=y.replace("###CSSPROP###",x);
	document.getElementById("styleDIV").innerHTML=z;
}
if (!String.prototype.trim) {
 String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};
}	
</script>
<style> 
body{font-family:verdana;font-size:12px;}#playitcontainer{width:100%;background-color:#e5eecc;border:1px solid #98bf21;margin:auto;}#enlargecssprop{font-weight:bold;font-size:14px;color:#000000;}#demoDIV{margin-left:10px;margin-top:3px;background-color:#ffffff;border:1px solid #c3c3c3;height:280px;width:430px;}#styleDIV {font-family:consolas,Courier new;font-size:14px;margin-left:10px;margin-right:15px;background-color:#ffffff;padding:10px;color:#222222;text-align:left;}div.demoHeader{font-size:14px;margin-top:5px;margin-left:5px;margin-bottom:2px;color:#617f10;}div.playitFooter{font-size:13px;color:#617f10;padding:10px;}#pfooter{margin:15px;}div#myDIV{width:100px;height:100px;background:red;position:relative;-webkit-animation:mymove 5s infinite;-webkit-animation-play-state:running;	animation:mymove 5s infinite;animation-play-state:running;	}@-webkit-keyframes mymove /* Safari and Chrome */{from {left:0px;}to {left:200px;}}@keyframes mymove{from {left:0px;}to {left:200px;}}
</style>
<div id="playitcontainer">
<div>
<div class="demoHeader">CSS 属性:<b>animation-play-state:</b></div>	
<form style="margin:15px;" action="javascript:return false;">
<input type="hidden" id="preselectedValue" value="normal" />
<div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" id="value_1" value="paused"><label for="value_1">paused</label></div>
<div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" id="value_2" value="running"><label for="value_2">running</label></div>
</form>
<div id="pfooter"><footer>
<p><strong>注意:</strong> Internet Explorer 9 及更早版本不支持 animation-play-state 属性</p>
</footer></div>
	</div>
	<div style="float:left;">
		<div class="demoHeader">结果:</div>
		<div id="demoParent">
			<div id="demoDIV"><div>
<div id="myDIV" class="mynormal"></div>
</div></div>
		</div>
		<div class="demoHeader">CSS 代码:</div>
		<div id="styleDIV">	div#myDIV<br>	{<br>	animation-play-state:<span id='enlargecssprop'>normal</span>;<br>	}<br>
		</div>
	</div>