I'm playing around with some image effects with css but it is not working. The first image is showing but it is not animating with the second. What am I doing wrong?
I have the following html is the head:

<head>
div
{
animation: clouds 5s;
-moz-animation: clouds 5s; /* Firefox */
-webkit-animation: clouds 5s; /* Safari and Chrome */
-o-animation: clouds 5s; /* Opera */
}
</head>

and the following css:

@keyframes clouds
{
from {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion1.jpg);}
to {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion2.jpg);}
}

@-moz-keyframes clouds /* Firefox */
{
from {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion1.jpg);}
to {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion2.jpg);}
}

@-webkit-keyframes clouds /* Safari and Chrome */
{
from {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion1.jpg);}
to {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion2.jpg);}
}

@-o-keyframes clouds /* Opera */
{
from {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion1.jpg);}
to {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion2.jpg);}
}


Many thanks