0
我創建了一個jsfiddle,其代碼在Chrome(版本48.0.2564.116)中工作時遇到問題,但在IE(版本11.0.9600.17631)中可用。在IE中,背景圖片的動畫效果很好,但Chrome瀏覽器沒有出現動畫。使用CSS的關鍵幀動畫 - 不適用於Chrome
在此先感謝您的幫助。
的代碼如下:
#backgroundOnly {
background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 50%, #CCC49F 100%);
background-image: -ms-linear-gradient(left, #CCC49F 0%, #ffffff 50%, #CCC49F 100%); /* IE 10+ */
}
#backgroundAnimation {
width: 200px;
height: 100px;
background: red;
position :relative;
animation: spotLight 5s linear 0s infinite alternate;
-webkit-animation: spotLight 5s infinite alternate linear 0s ;
background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 50%, #CCC49F 100%); Safari /*5.1+, Mobile Safari, Chrome10+ */
}
@keyframes spotLight { /* IE 10+ */
from {background-image: -ms-linear-gradient(left, #CCC49F 0%, #ffffff 75%, #CCC49F 100%);}
to {background-image: -ms-linear-gradient(left, #CCC49F 0%, #ffffff 20%, #CCC49F 100%);}
}
@-webkit-keyframes spotLight { /*Safari 5.1+, Mobile Safari, Chrome10+ */
from {background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 75%, #CCC49F 100%);}
to {background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 20%, #CCC49F 100%);}
}
<!DOCTYPE html>
<body>
<div id="backgroundOnly">
<p>background only</p>
<div id="backgroundAnimation">
<p>background animation</p>
</div>
</div>
</body>