animate.css is loading double time in firefox and chrome

[sivasankar]

Hi Anyone please help me on this in my page i used fadeInUp css from animate.css file. when i open in firefox it is loading double time.

This is css i used.

@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

@-moz-keyframes fadeInUp {
from {
opacity: 0;

-moz-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);

}

to {
opacity: 1;
-moz-transform: none;
transform: none;
}
}

@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
-o-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}

to {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
}

.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}

some times i am getting same error in chrome also

[Beverleyh]

If you’re only using one animation, why load the whole library? You could just extract the CSS you need (and include a credit to the developer) into your stylesheet.

This will do it;

.my-element { -webkit-animation:fadeInUp 1s both; animation:fadeInUp 1s both }

@-webkit-keyframes fadeInUp {
    0% { opacity:0; -webkit-transform:translate3d(0,100%,0) }
    100% { opacity:1; -webkit-transform:none }
    }
@keyframes fadeInUp {
    0% { opacity:0; transform:translate3d(0,100%,0) }
    100% { opacity:1; transform:none }
    }

Depending on the support you need, you might be able to drop all the vendor prefixes and just use -webkit- too.

[Author]

Posts