firing javascript after css3 page fade-in to make animation smoother?

Question

I have some javascript that slows down my page fade-in animation. I am wondering how it would be possible to prevent javascript from firing until my css3 animations have reached an end? Or at least fire the javascript after X amount of seconds.

Do you have any advice? Im still new to JS so any critics and feedback is welcome as I love to learn news things.

I thought of adding all scripts after window onload but it doesnt really help.

Thank you in advance for your feedback,

Answer 1

In chrome you can try: window.ontransitionend - for css transitions window.onwebkitanimationend - for css animations

I have used them in the past. The event contains the class name of the animation.

an example: the css

@-webkit-keyframes doubleme {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(2);
    }
}
.tag:hover {
-webkit-animation: doubleme 1s;
}

the javascript

window.onwebkitanimationend = function (event) {
  console.log(event.animationName,event.srcElement.className);
  // if correct animation
  // execute javascript
};

then execute you javascript after you get the correct end to your animation.

Answer 2

You can use .delay on the Javscript to delay how long before it fires. http://api.jquery.com/delay/