根据css3动画写了一个进度条，但是定时器执行的百分比是10秒，而进度条动画css3却不能设置十秒，执行不同步？求助~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style type="text/css">
#loading{animation:move 10s;background-color:#6caf00;text-align:center}
#allload{width:180px;height:20px;border:1px solid}
@keyframes move
{0%{width:0%;}100%{width:100%;}}
</style>
</head>
<body>
<p>JavaScript百分比进度条</p>
<div id=allload>
<div id=loading></div>
</div>
<input type="button" value="点击" onclick="setInterval(timer,100)";/>
</body>
<script type="text/javascript">
var pg=document.getElementById("pg");
function myload(){
if(pg.value!=100){
pg.value=pg.value+1;}}
var loading=document.getElementById("loading");
var count=0;
function timer(){
if(count<100){
count=count+1;}
loading.innerHTML=count+"%";}
</script>
</html>
