如果有任何元素被隐藏，那么css3动画的计算仍然发生在后台？

Question

如果任何元素被隐藏(显示:无)，css3动画计算是否继续在后台进行。

例如:在加载数据和UI之前，我有以下css来旋转页面上的全局。

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(360deg);
  }
  to { 
    -webkit-transform: rotate(0deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(360deg);
  }
  to { 
    transform: rotate(0deg);
  }
}

.rotating-globe{
    background-image:url(../images/globe.png);
    -webkit-animation: rotate 20s linear infinite 0s;
    animation: rotate 20s linear infinite 0s;
}

我观察到当地球仪被设置的时候，display:none，那么如果我再次显示的话，地球仪的角度会继续变化。

如果它一直旋转地球，即使它是隐藏的，那么它正在消耗CPU周期，这是不想要的。

我想知道，css动画的计算还在继续吗？

谢谢。

Answer 1

是的..。阿米特什兄弟..。答案是..。你的过渡还在后台处理..。这确实影响了性能，但我认为这在现代设备中并不是一个大问题。

您可以在以下网站获得有关它的更多信息：How do you detect when CSS animations start and end with JavaScript?

希望这能帮你..。祝你一天愉快..。