CSS Background image animation wont work

Problem

im trying to do a css background animation with the Body tag. Here's the code

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;}
}

But when i use it the background just fades from white to blue. Is there a reason why the image wont display? And by the way the image directory is correct and works if i just set it as the background image.

Problem courtesy of: user2072017

Solution

Background image isn't a property that can be animated - you can't tween the property. Thus you cant use it with keyframe animations. Instead try this code-

<!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>
Solution courtesy of: Sid

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.