CSS3的animation在chrome里运作出现【怪现象】
日期：2014-05-17 浏览次数：20679 次
CSS3的animation在chrome里运行出现【怪现象】
这段代码的意义是，当点击屏幕上的小方块（DIV）时，小方块会自动旋转和拉伸并改变透明度，这段代码在firefox里面运行正常，但是在chrome里运行出现问题：
1.只有透明度在转化，旋转和拉伸没有；
2.当前面加一行alert的代码时，点击确定关掉弹出窗口时，能正常运行；
chrome版本 22.0.1229.96
请问各位大神这是什么个情况，有什么解决办法，总不能无端的加个alert吧……
------解决方案--------------------
。。。我表示all OK LZ赶紧重装吧
------解决方案--------------------
额。。。你的JS咋都写到body外面去了 太嚣张了 难怪出错
<!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外面去了 太嚣张了 难怪出错
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
