使用CSS的關鍵幀動畫 - 不適用於Chrome

我創建了一個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>

來源

2016-03-06 vlady

https://jsfiddle.net/b4192ynm/1/

頗有些錯字和錯誤代碼。

#backgroundOnly { 
    background-image: -webkit-linear-gradient(left, #ccc49f 0%, #ffffff 50%, #ccc49f 100%); 
    background-image: linear-gradient(to right, #ccc49f 0%, #ffffff 50%, #ccc49f 100%); 
} 

#backgroundAnimation { 
    width: 200px; 
    height: 100px; 
    background: red; 
    position: relative; 
    -webkit-animation: spotLight 2s linear 0s infinite alternate; 
    animation: spotLight 2s linear 0s infinite alternate; 
} 

@-webkit-keyframes spotLight { 
    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%); 
    } 
} 

@keyframes spotLight { 
    from { 
    background-image: linear-gradient(to right, #ccc49f 0%, #ffffff 75%, #ccc49f 100%); 
    } 
    to { 
    background-image: linear-gradient(to right, #ccc49f 0%, #ffffff 20%, #ccc49f 100%); 
    } 
}

所以現在至少他們在Chrome中從一邊滑到另一邊。如果你的意思是他們沒有很好地逐漸改變，那麼這個問題是this question.的副本正如你可以閱讀那裏，在這一刻，只有IE支持這一點。

來源

2016-03-06 09:53:44

使用CSS的關鍵幀動畫 - 不適用於Chrome

回答

相關問題