Image animation with css

HTML & CSS
1

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

2

The above code seems to work ok in Chrome. AFAIK Firefox doesn’t support the cross-fade between different images.

You could use transitions to change one image into another but its only triggered on hover.

http://www.pmob.co.uk/temp/dissolve.htm