Maison > interface Web > tutoriel HTML > CSS3的animation在chrome里运行出现【怪现象】_html/css_WEB-ITnose

CSS3的animation在chrome里运行出现【怪现象】_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 09:39:32
original
1163 Les gens l'ont consulté

<!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>
Copier après la connexion


这段代码的意义是,当点击屏幕上的小方块(DIV)时,小方块会自动旋转和拉伸并改变透明度,这段代码在firefox里面运行正常,但是在chrome里运行出现问题:
1.只有透明度在转化,旋转和拉伸没有;
2.当前面加一行alert的代码时,点击确定关掉弹出窗口时,能正常运行;

chrome版本 22.0.1229.96

请问各位大神这是什么个情况,有什么解决办法,总不能无端的加个alert吧……


回复讨论(解决方案)

。。。我表示all OK LZ赶紧重装吧

额。。。你的JS咋都写到body外面去了 太嚣张了 难怪出错

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal