CSS背景图像动画不起作用答案

【问题标题】：CSS Background image animation wont workCSS背景图像动画不起作用
【发布时间】：2013-06-26 23:09:29
【问题描述】：

我试图用 Body 标签做一个 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;}
}

但是当我使用它时，背景只是从白色变为蓝色。图片显示不出来有什么原因吗？顺便说一下，如果我将其设置为背景图像，图像目录是正确的并且可以工作。

【问题讨论】：

这是 html 标题>
使用edit 按钮为问题添加更多内容。这样您就可以正确格式化它。

标签： image css animation background

【解决方案1】：

背景图片不是可以动画的属性 - 您不能对属性进行补间。因此，您不能将它与关键帧动画一起使用。试试这个代码-

<!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>

【讨论】：

你想从一张图片到另一张图片吗？是的，它可以。
这个答案不正确。背景图片可以动画化：davidwalsh.name/demo/background-animation-css.php