CSS 在加载时禁用动画 - CSS

在网站加载速度变慢时，人们经常会经历“等待动画”的困扰。这意味着当网站加载缓慢时，动画将不断循环，为用户提供错觉，即网站正在加载，但实际上它仍处于固定的状态。这可能会导致用户的沮丧和恼怒，从而带来负面的用户体验。

解决这个问题的方法是，在网站加载完成前禁用CSS动画。下面是如何在CSS中使用javascript来禁用动画的示例：

<style>
  /*定义CSS动画*/
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  /*应用CSS动画*/
  .loader {
    animation: spin 1s linear infinite;
  }
  /*当DOM加载完成时，禁用CSS动画*/
  .loader.disable-animation {
    animation: none !important;
  }
</style>
<!--定义一个正在加载动画-->
<div class="loader"></div>
<script>
  //当DOM加载完成时，添加disable-animation类来禁用动画
  document.addEventListener("DOMContentLoaded", function() {
    document.querySelector('.loader').classList.add('disable-animation');
  });
</script>

在上面的示例中，我们首先定义了一个名为“spin”的CSS动画，将其应用于带有“loader”类的DIV元素。然后，使用javascriptaddEventListener和DOMContentLoaded事件在DOM加载完成后添加“disable-animation”类来禁用动画。

通过这种方法，我们可以在网站加载缓慢时避免CSS动画，并提供更好的用户体验。

参考链接：https://www.sitepoint.com/prevent-css-animation-on-page-load/