CODEWITHSUNDEEP
csscss-transitions
Faysal Ahmed
Faysal Ahmed

Reputation: 13

CSS3 Keyframes animation not working in Mozilla Firefox

I am trying to make css3 slider when i set -moz- prefix for image sliding slider even not work in chrome let alone Mozilla Firefox. but =webkit- prefix is working good in Chrome if i do not use -moz prefix with -webkit. even i declare caption animation. Caption animation is not working.

just have look on my code : http://codepen.io/faeshaan/pen/pefwq

Upvotes: 1

Views: 5270

Answers (3)

apaul
apaul

Reputation: 16170

I found a few issues looking at you code:

  • syntax for keyframes should be @keframes slide{} not @keyframes 'slide' {}
  • the slide animation was missing a closing }
  • added an initial left:0; position to .container ul as dc5 suggested
  • added a specific height of 200px to .container to make the heading animation look a little cleaner.

This will work as is in Firefox v22, but you will still need to add browser prefixes for full support.

Working Example

.container {
    width:200px;
    height:200px;
    margin:0px auto;
    overflow:hidden;
}
.container ul {
    width:1000px;
    list-style:none;
    position:relative;
    left:0;
    animation: slide 20s infinite;
}
ul, li {
    padding:0px;
    margin:0px;
}
.container ul li {
    position:relative;
    left:0px;
    float:left;
}
.container h5 {
    background:rgba(0, 0, 0, 0.5);
    position:absolute;
    bottom:4px;
    width:100%;
    padding:5px;
    color:#fff;
    text-align:center;
    margin-bottom:0px;
    animation: headings 4s infinite;
}
@keyframes slide {
    10% {
        left:0px;
    }
    15%, 30% {
        left:-200px;
    }
    35%, 50% {
        left:-400px;
    }
    55%, 70% {
        left:-600px;
    }
    75%, 90% {
        left:-800px;
    }
}
@keyframes headings {
    10% {
        margin-bottom:4px;
    }
    25%, 50% {
        margin-bottom:-150px;
    }
}

Upvotes: 1

dc5
dc5

Reputation: 12441

After adding in the keyframe definitions and css properties for mozilla (basically what @Ilan Biala said re: css markup) the animation still didn't work for me on OSX Firefox v22.

Adding an initial:

left: 0px;

Made the animation start working. Seems firefox didn't like animating left unless it was first explicitly defined in the css class.

Upvotes: 1

Ilan Biala
Ilan Biala

Reputation: 3417

I rearranged your code to put the keyframe animation definitions below the properties that are using them. Also, you only had the -webkit-animation: ; declaration, so I added the other declarations for mozilla, microsoft, opera, and W3C compliant browsers.

I also combined the animation-iteration-count: ; into the animation: ; declaration because it saves a little text in the file.

So now instead of what you had before:

.container h5 {
    background:rgba(0,0,0,0.5);
    position:absolute;
    bottom:4px;
    width:100%;
    padding:5px;
    color:#fff;
    text-align:center;
    margin-bottom:0px;
    -webkit-animation: headings 20s;
}

@-webkit-keyframes headings {
  10%  {
     margin-bottom:4px;
  }
  15%,30% {
     margin-bottom:-200px;
  }
}

It looks like this:

.container h5 {
    background:rgba(0,0,0,0.5);
    position:absolute;
    bottom:4px;
    width:100%;
    padding:5px;
    color:#fff;
    text-align:center;
    margin-bottom:0px;
    -webkit-animation: headings 20s;
    -moz-animation: headings 20s;
    -ms-animation: headings 20s;
    -o-animation: headings 20s;
    animation: headings 20s;
}

And I added the corresponding keyframe definitions.

The final pen is here.

Upvotes: 0

Related Questions