chrome_html/css_WEB-ITnoseでCSS3アニメーションを実行すると【奇妙な現象】が発生する-htmlチュートリアル-php.cn

chrome_html/css_WEB-ITnoseでCSS3アニメーションを実行すると【奇妙な現象】が発生する

WBOY

リリース： 2016-06-21 09:39:32

オリジナル

1163 人が閲覧しました

<!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. 前にアラートコードの行を追加する場合は、[OK] をクリックしてポップアップウィンドウを閉じます。 Chrome バージョン 22.0.1229.96

マスター、状況は何ですか? 解決策は何ですか? 理由もなくアラートを追加することはできません...

ディスカッション (解決策) に返信します。。。私は大丈夫と言ったのですが、LZ 急いで再インストールしてください