[Solved] Css animation optimisation [closed]

by


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.

solved Css animation optimisation [closed]