CSS背景圖像動畫不會工作

即時通訊嘗試做一個與身體標記的CSS背景動畫。這裏的代碼CSS背景圖像動畫不會工作

body 
{ 
animation-name:mymove; 
animation-duration:5s; 
animation-direction:alternate; 
animation-iteration-count:infinite; 
-webkit-animation-name:mymove; 
-webkit-animation-duration:5s; 
-webkit-animation-direction:alternate; 
-webkit-animation-iteration-count:infinite; 
} 
@keyframes mymove 
{ 
from {background-image:url('Space.png');} 
to {background:blue;} 
} 
@-webkit-keyframes mymove 
{ 
from {background-image:url('Space.png');} 
to {background:blue;} 
}

但是，當我使用它的背景只是從白色變爲藍色。是否有圖像不會顯示的原因？順便說一下，圖像目錄是正確的，如果我只是將其設置爲背景圖像，就可以工作。

來源

2013-06-29 user2072017

和繼承人的HTML <！DOCTYPE HTML> <鏈接相對= 「樣式」類型= 「文/ CSS的」 href = 「desktop.css」> – user2072017

使用'edit'按鈕加入更多內容的問題。這樣你可以正確地格式化它。 –

背景圖像不是可以動畫的屬性 - 您無法補間屬性。因此你不能在關鍵幀動畫中使用它。相反，試試這個代碼 -

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
body 
{background:url('Space.png');} 

#frame 
{ 
position: absolute; 
z-index: -1; 
top: 0; 
left: 0; 
height: 100%; /* or the height of webpage is px */ 
width: 100%; /* or the width of webpage is px */ 
animation-name:mymove; 
animation-duration:5s; 
animation-direction:alternate; 
animation-iteration-count:infinite; 
-webkit-animation-name:mymove; 
-webkit-animation-duration:5s; 
-webkit-animation-direction:alternate; 
-webkit-animation-iteration-count:infinite; 
} 
@keyframes mymove 
{ 
from {background:transparent;} 
to {background:blue;} 
} 
@-webkit-keyframes mymove 
{ 
from {background:transparent;} 
to {background:blue;} 
} 
</style> 
</head> 
<body> 
<div id="frame"> 
<--- Webpage contents ---> 
</div> 
</body> 
</html>

來源

2013-06-29 06:24:56 Sid

非常感謝，真的很有幫助，現在完美！ – user2072017

這將工作與兩個圖像，但？ – user2072017

你想說從一個圖像到另一個圖像嗎？是的，它可以。 – Sid

CSS背景圖像動畫不會工作

回答

相關問題