用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-size: cover屬性設置動畫的background-position屬性。

  /*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>