<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5</title>
<style type="text/css">
#a3{width:50px; height:50px; background-color:#000066;margin:200px 0 0 200px;color:#FFF;}
@-webkit-keyframes aa1{
0%{-webkit-transform:rotate(0deg) scale(1,1) skew(0deg,0deg);opacity:1;}
50%{-webkit-transform:rotate(180deg) scale(2,2) skew(45deg,0deg);opacity:0;}
100%{-webkit-transform:rotate(360deg) scale(1,1) skew(0deg,0deg);opacity:1;}
}
@-moz-keyframes aa1{
0%{-moz-transform:rotate(0deg) scale(1,1) skew(0deg,0deg);opacity:1;}
50%{-moz-transform:rotate(180deg) scale(2,2) skew(45deg,0deg);opacity:0;}
100%{-moz-transform:rotate(360deg) scale(1,1) skew(0deg,0deg);opacity:1;}
}
.a3:hover{
-webkit-animation-name:aa1;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:aa1;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
}
.a5{
-webkit-animation-name:aa1;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:aa1;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
}
</style>
</head>
<body>
<div id="a3">123456</div>
</body>
<script>
var a = document.getElementById("a3");
a.addEventListener("click",function(){
//alert("a5");
//a.style.cssText = "-webkit-animation-name:aa1;-webkit-animation-duration:5s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite;";
a.className = "a5";
});
</script>
</html>
这段代码的意义是，当点击屏幕上的小方块（DIV）时，小方块会自动旋转和拉伸并改变透明度，这段代码在firefox里面运行正常，但是在chrome里运行出现问题：
1.只有透明度在转化，旋转和拉伸没有；
2.当前面加一行alert的代码时，点击确定关掉弹出窗口时，能正常运行；
chrome版本 22.0.1229.96
请问各位大神这是什么个情况，有什么解决办法，总不能无端的加个alert吧……
------解决方案--------------------
。。。我表示all OK LZ赶紧重装吧
------解决方案--------------------
额。。。你的JS咋都写到body外面去了 太嚣张了 难怪出错
