Question

我试图用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;}
}

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

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

CSS背景图像动画不会工作

1 个答案: