CODEWITHSUNDEEP
htmlcsscss-animations
Yolo Submarine
Yolo Submarine

Reputation: 55

@keyframes not working in Firefox

Umm, hello. I was playing around with the @keyframes property of CSS3 and the animation doesn't seem to work in Firefox. Can someone please tell me what is wrong in my code?

Thanks!

#slideshow{
    height : 150px;
    width : 190px;
    animation:slideshow 21s infinite;
    -webkit-animation:slideshow 21s infinite;
    -moz-animation:slideshow 21s infinite;
}



@keyframes slideshow{
    0%   {background : url('1.jpg');}
    14%  {background : url('2.jpg');}
    28%  {background : url('3.jpg');}
    42%  {background : url('4.jpg');}
    56%  {background : url('5.jpg');}
    70%  {background : url('6.jpg');}
    84%  {background : url('7.jpg');}
    100%  {background : url('1.jpg');}
}

@-webkit-keyframes slideshow{
    0%   {background : url('1.jpg');}
    14%  {background : url('2.jpg');}
    28%  {background : url('3.jpg');}
    42%  {background : url('4.jpg');}
    56%  {background : url('5.jpg');}
    70%  {background : url('6.jpg');}
    84%  {background : url('7.jpg');}
    100%  {background : url('1.jpg');}
}

@-moz-keyframes slideshow{
    0%   {background : url('1.jpg');}
    14%  {background : url('2.jpg');}
    28%  {background : url('3.jpg');}
    42%  {background : url('4.jpg');}
    56%  {background : url('5.jpg');}
    70%  {background : url('6.jpg');}
    84%  {background : url('7.jpg');}
    100%  {background : url('1.jpg');}
}

Also, the animation works perfectly in Chrome.

Upvotes: 3

Views: 7596

Answers (3)

matt127
matt127

Reputation: 11

Try adding background: url('1.jpg'); to the #slideshow element css to initially establish it. That always solves this problem for me. Firefox seems to need a specific starting point.

#slideshow{
background: url('1.jpg');
height : 150px;
width : 190px;
animation:slideshow 21s infinite;
-webkit-animation:slideshow 21s infinite;
-moz-animation:slideshow 21s infinite;
}

Upvotes: 1

Saige
Saige

Reputation: 11

According to Mozilla although @keyframes is supported it is currently unstable and the syntax should look like what you already have, however the working animation they provide here seems to avoid using shorthand to define the animation properties, and it does not use the -moz-animation prefix, it instead uses only @-moz-keyframes and calls the regular 'animation' property;

https://developer.mozilla.org/samples/cssref/animations/cssanim1.html

Their css looks like this:

h1 {
    animation-duration: 3s;
    animation-name: slidein;
}

@-moz-keyframes slidein {
0% {
    margin-left: 100%;
    width: 300%;
}

100% {
    margin-left: 0;
    width: 100%;
}
}

Perhaps you should try 

#slideshow {
animation-name:slideshow;
animation-duration:5s;
animation-iteration-count:infinite;
}

Upvotes: 0

Ghost Echo
Ghost Echo

Reputation: 2067

It's not working because you have declared the wrong property.

The declaration you need for firefox is just animation. Only Chrome and Safari need the -webkit- prefix for this CSS3 effect.

So your code would be: 

-webkit-animation:slideshow 21s infinite;

animation:slideshow 21s infinite;

http://www.w3schools.com/css3/css3_animations.asp

Upvotes: 0

Related Questions