Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Robert Kwiat
Robert Kwiat
5,349 Points

Animation Browser Support Issues

Hi everyone, I am having trouble here. I made a CSS animation that acts as a slideshow and it works in the browsers Safari, Google Chrome, and Opera but it does not work in Firefox. The images do not show up. Please help me.

Thanks!

Here is my CSS 

/* This edits and sets the dimensions for the top slideshow. */

#food_slide_1 {
    width: 150px;
    height: 150px;
    border-radius: 5%;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    -webkit-animation: slide_1 60s 0s infinite;
    -moz-animation: slide_1 60s 0s infinite;
    -ms-animation: slide_1 60s 0s infinite;
    -o-animation: slide_1 60s 0s infinite;
    margin: -397px 0 0 45%;
}


/* This edits and sets the dimensions for the bottom slideshow. */

#food_slide_2 {
    width: 150px;
    height: 150px;
    border-radius: 5%;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    -webkit-animation: slide_2 60s 0s infinite;
    -moz-animation: slide_2 60s 0s infinite;
    -ms-animation: slide_2 60s 0s infinite;
    -o-animation: slide_2 60s 0s infinite;
    margin: 50px 0 0 45%;
}




/* Chrome and Safari */
/* This is the actual slideshow animation. */

@-webkit-keyframes slide_1 {
    0%  {background: url('img/index/slideshow/1.jpg');}
    9.1%  {background: url('img/index/slideshow/2.jpg');}
    18.2%  {background: url('img/index/slideshow/3.jpg');}
    27.3%  {background: url('img/index/slideshow/4.jpg');}
    36.4%  {background: url('img/index/slideshow/5.jpg');}
    45.5%  {background: url('img/index/slideshow/6.jpg');}
    54.6%  {background: url('img/index/slideshow/7.jpg');}
    63.7%  {background: url('img/index/slideshow/8.jpg');}
    72.8%  {background: url('img/index/slideshow/9.jpg');}
    81.9%  {background: url('img/index/slideshow/10.jpg');}
    91%  {background: url('img/index/slideshow/11.jpg');}
    100% {background: url('img/index/slideshow/12.jpg');}
}

@-webkit-keyframes slide_2 {
    0%  {background: url('img/index/slideshow/5.jpg');}
    9.1%  {background: url('img/index/slideshow/6.jpg');}
    18.2%  {background: url('img/index/slideshow/7.jpg');}
    27.3%  {background: url('img/index/slideshow/8.jpg');}
    36.4%  {background: url('img/index/slideshow/9.jpg');}
    45.5%  {background: url('img/index/slideshow/10.jpg');}
    54.6%  {background: url('img/index/slideshow/11.jpg');}
    63.7%  {background: url('img/index/slideshow/12.jpg');}
    72.8%  {background: url('img/index/slideshow/1.jpg');}
    81.9%  {background: url('img/index/slideshow/2.jpg');}
    91%  {background: url('img/index/slideshow/3.jpg');}
    100% {background: url('img/index/slideshow/4.jpg');}
}


/* Firefox */
/* This is the actual slideshow animation. */

@-moz-keyframes slide_1 {
    0%  {background: url('img/index/slideshow/1.jpg');}
    9.1%  {background: url('img/index/slideshow/2.jpg');}
    18.2%  {background: url('img/index/slideshow/3.jpg');}
    27.3%  {background: url('img/index/slideshow/4.jpg');}
    36.4%  {background: url('img/index/slideshow/5.jpg');}
    45.5%  {background: url('img/index/slideshow/6.jpg');}
    54.6%  {background: url('img/index/slideshow/7.jpg');}
    63.7%  {background: url('img/index/slideshow/8.jpg');}
    72.8%  {background: url('img/index/slideshow/9.jpg');}
    81.9%  {background: url('img/index/slideshow/10.jpg');}
    91%  {background: url('img/index/slideshow/11.jpg');}
    100% {background: url('img/index/slideshow/12.jpg');}
}

@-moz-keyframes slide_2 {
    0%  {background: url('img/index/slideshow/5.jpg');}
    9.1%  {background: url('img/index/slideshow/6.jpg');}
    18.2%  {background: url('img/index/slideshow/7.jpg');}
    27.3%  {background: url('img/index/slideshow/8.jpg');}
    36.4%  {background: url('img/index/slideshow/9.jpg');}
    45.5%  {background: url('img/index/slideshow/10.jpg');}
    54.6%  {background: url('img/index/slideshow/11.jpg');}
    63.7%  {background: url('img/index/slideshow/12.jpg');}
    72.8%  {background: url('img/index/slideshow/1.jpg');}
    81.9%  {background: url('img/index/slideshow/2.jpg');}
    91%  {background: url('img/index/slideshow/3.jpg');}
    100% {background: url('img/index/slideshow/4.jpg');}
}

/* Internet Explorer */
/* This is the actual slideshow animation. */

@-ms-keyframes slide_1 {
    0%  {background: url('img/index/slideshow/1.jpg');}
    9.1%  {background: url('img/index/slideshow/2.jpg');}
    18.2%  {background: url('img/index/slideshow/3.jpg');}
    27.3%  {background: url('img/index/slideshow/4.jpg');}
    36.4%  {background: url('img/index/slideshow/5.jpg');}
    45.5%  {background: url('img/index/slideshow/6.jpg');}
    54.6%  {background: url('img/index/slideshow/7.jpg');}
    63.7%  {background: url('img/index/slideshow/8.jpg');}
    72.8%  {background: url('img/index/slideshow/9.jpg');}
    81.9%  {background: url('img/index/slideshow/10.jpg');}
    91%  {background: url('img/index/slideshow/11.jpg');}
    100% {background: url('img/index/slideshow/12.jpg');}
}

@-ms-keyframes slide_2 {
    0%  {background: url('img/index/slideshow/5.jpg');}
    9.1%  {background: url('img/index/slideshow/6.jpg');}
    18.2%  {background: url('img/index/slideshow/7.jpg');}
    27.3%  {background: url('img/index/slideshow/8.jpg');}
    36.4%  {background: url('img/index/slideshow/9.jpg');}
    45.5%  {background: url('img/index/slideshow/10.jpg');}
    54.6%  {background: url('img/index/slideshow/11.jpg');}
    63.7%  {background: url('img/index/slideshow/12.jpg');}
    72.8%  {background: url('img/index/slideshow/1.jpg');}
    81.9%  {background: url('img/index/slideshow/2.jpg');}
    91%  {background: url('img/index/slideshow/3.jpg');}
    100% {background: url('img/index/slideshow/4.jpg');}
}


/* Opera */
/* This is the actual slideshow animation. */

@-o-keyframes slide_1 {
    0%  {background: url('img/index/slideshow/1.jpg');}
    9.1%  {background: url('img/index/slideshow/2.jpg');}
    18.2%  {background: url('img/index/slideshow/3.jpg');}
    27.3%  {background: url('img/index/slideshow/4.jpg');}
    36.4%  {background: url('img/index/slideshow/5.jpg');}
    45.5%  {background: url('img/index/slideshow/6.jpg');}
    54.6%  {background: url('img/index/slideshow/7.jpg');}
    63.7%  {background: url('img/index/slideshow/8.jpg');}
    72.8%  {background: url('img/index/slideshow/9.jpg');}
    81.9%  {background: url('img/index/slideshow/10.jpg');}
    91%  {background: url('img/index/slideshow/11.jpg');}
    100% {background: url('img/index/slideshow/12.jpg');}
}

@-o-keyframes slide_2 {
    0%  {background: url('img/index/slideshow/5.jpg');}
    9.1%  {background: url('img/index/slideshow/6.jpg');}
    18.2%  {background: url('img/index/slideshow/7.jpg');}
    27.3%  {background: url('img/index/slideshow/8.jpg');}
    36.4%  {background: url('img/index/slideshow/9.jpg');}
    45.5%  {background: url('img/index/slideshow/10.jpg');}
    54.6%  {background: url('img/index/slideshow/11.jpg');}
    63.7%  {background: url('img/index/slideshow/12.jpg');}
    72.8%  {background: url('img/index/slideshow/1.jpg');}
    81.9%  {background: url('img/index/slideshow/2.jpg');}
    91%  {background: url('img/index/slideshow/3.jpg');}
    100% {background: url('img/index/slideshow/4.jpg');}
}

1 Answer

Chris Shaw
Chris Shaw
26,676 Points

Hi Robert,

Since Firefox 16 the -moz prefix has been removed so you will also need to include the W3C specified property and keyframes syntax which you should include anyway as newer browser releases will slowly remove the prefix all-together.

#food_slide_1 {
    animation: slide_1 60s 0s infinite;
}

#food_slide_2 {
    animation: slide_2 60s 0s infinite;
}

@keyframes slide_1 {
    /* ... */
}

@keyframes slide_2 {
    /* ... */
}