Question

Can I optimize CSS animation not to run when the animate object not need to be display (it’s not on the view port)?
Thanks!

Answer 1

If you could detect when the object IS in view port, you could add/remove the css class with the animation description. Something like:

// the css class to be added/removed
.animationClass
{
      animation: someAnimation 5s;
     -moz-animation: someAnimation 5s; /* Firefox */
     -webkit-animation: someAnimation 5s; /* Safari and Chrome */
     -o-animation: someAnimation 5s; /* Opera */
}

// the jQuery code
if( isObjectInViewPort() == true){
   $('.someObject').addClass('animationClass'); // note that there is no dot before 'animationClass'
   // or remove it $('.someObject').removeClass('animationClass');
}

The tricky part is to check when the object is not in view port anymore. In my opinion, constantly checking if the object is in view port and preventing animation will bring more harm than good, since css animations are lightweight and work very well.