使用CSS漸變動畫背景圖像？

Question

我有這個CSS嘗試無限地移動一個背景圖像疊加在背景漸變上通過動畫的位置。圖像不是動畫。我將它作爲一個沒有漸變的例子。 https://davidwalsh.name/background-animation-css

建議讚賞。

/*Home header scrolling background pattern animation*/ 
    @keyframes animatedBackground { 
    from { background-position: 0 0; } 
    to { background-position: 100% 0; } 
    } 



#homeheader{ 
background-color: #53DFFD; 
background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), -webkit-radial-gradient(circle, #53DFFD, #6960F5); 
background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), -moz-radial-gradient(circle, #53DFFD, #6960F5); 
background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), -o-radial-gradient(circle, #53DFFD, #6960F5); 
background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), radial-gradient(circle, #53DFFD, #6960F5); 
background-size: cover, cover; 
background-position: 0px 0px; 
background-repeat: repeat-x; 
animation: animatedBackground 4s linear infinite; 
} 

Answer 1

你的問題不是梯度，而是background-size: cover屬性。您不能在background-position屬性上啓用background-size: cover屬性。

/*Home header scrolling background pattern animation*/ 
 
@keyframes animatedBackground { 
 
    from { background-position: 0 0; } 
 
    to { background-position: 100% 0; } 
 
} 
 

 
#homeheader{ 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: #53DFFD; 
 
    background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), -webkit-radial-gradient(circle, #53DFFD, #6960F5); 
 
    background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), -moz-radial-gradient(circle, #53DFFD, #6960F5); 
 
    background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), -o-radial-gradient(circle, #53DFFD, #6960F5); 
 
    background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), radial-gradient(circle, #53DFFD, #6960F5); 
 
    background-position: 0px 0px; 
 
    background-repeat: repeat-x; 
 
    animation: animatedBackground 4s linear infinite; 
 
}

<div id="homeheader"></div>