I'm trying to do a simple slideshow using CSS, that would work fine cross browser. Here's what I've tried, and it works in all browsers. It was basically taken from W3schools website :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 1000px;
height: 600px;
background: red;
position: relative;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
0% {background: yellow;}
25% {background: green;}
50% {background: pink;}
75% {background: orange;}
100% {background: blue;}
}
/* Standard syntax */
@keyframes mymove {
0% {background: yellow;}
25% {background: green;}
50% {background: pink;}
75% {background: orange;}
100% {background: blue;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
And this works fine cross browser. But once I try to change the animation to 'rotate' background-images it works in chrome, but it wouldn't work in FireFox
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
0% {background-image: url(slideshow/01.jpg);}
25% {background-image: url(slideshow/02.jpg);}
50% {background-image: url(slideshow/03.jpg);}
75% {background-image: url(slideshow/04.jpg);}
100% {background-image: url(slideshow/05.jpg);}
}
/* Standard syntax */
@keyframes mymove {
0% {background-image: url(slideshow/01.jpg);}
25% {background-image: url(slideshow/02.jpg);}
50% {background-image: url(slideshow/03.jpg);}
75% {background-image: url(slideshow/04.jpg);}
100% {background-image: url(slideshow/05.jpg);}
}
