css - Css动画优化

Question

当动画对象不需要显示（它不在视口上）时，我可以优化CSS 动画不运行吗？谢谢！

Answer 1

如果您可以检测到对象何时在视口中，则可以添加/删除带有动画描述的 css 类。就像是：

// 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');
}

棘手的部分是检查对象何时不在视口中。在我看来，不断检查对象是否在视口中并阻止动画会弊大于利，因为 css 动画是轻量级的并且效果很好。