CODEWITHSUNDEEP
cssanimationcross-browsercss-transitionscss-animations
Aristi
Aristi

Reputation: 67

CSS3 animations working only in Firefox

I use a lot of CSS3 transitions and animations in my webpage but they only work in Firefox and not in other browsers that i have checked, e.g. Chrome. I use vendor prefixes but it seems to make no difference. I also read that i must have the vendor prefixes lines before the original line, but also this try didn't give any successful result. Here is one example of animation that is not working:

html {
    -webkit-animation-name: fadeInLeftBig;
    -moz-animation-name: fadeInLeftBig;
    -o-animation-name: fadeInLeftBig;
    animation-duration:1s;
    animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -moz-transform: translateX(-2000px);
        -o-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -moz-transform: translateX(-2000px);
        -o-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}

Upvotes: 1

Views: 506

Answers (2)

droymanz
droymanz

Reputation: 343

Actually it works but the duration of the animation is 0 seconds on other browsers, because you did not add a prefix -webkit to work with chrome and Safari.

So it must be 

html{
    .....
    animation-duration:1s;
    -webkit-animation-duration: 1s;
}

or you could combine the animation-duration and animation-name in one css property which is animation so it will be

html{
    -webkit-animation: fadeInLeftBig 1s;
    animation: fadeInLeftBig 1s;
}

Upvotes: 1

max li
max li

Reputation: 2457

add a -webkit specific keyframe

@keyframes fadeInLeftBig {

  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -moz-transform: translateX(-2000px);
    -o-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }

}
@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -moz-transform: translateX(-2000px);
    -o-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}

Upvotes: 0

Related Questions