Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS animate.css is loading double time in firefox and chrome Reply To: animate.css is loading double time in firefox and chrome

#239723
Beverleyh
Participant

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.