防止HTML元素继承父旋转动画

Question

我已经通过使用动画在网页中添加了一个"加载"旋转器，如下所示：

<style>
.spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -70px;
  margin-top: -50px;
  z-index: 2;
  width: 120px;
  height: 120px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
<div class="spinner"></div>

这很棒。但是我现在想在旋转器的中心将文本"加载"固定在适当的位置。我尝试使用相对定位来做到这一点：

.loader {
  width: 120px;
  margin: 0 auto;
  position: relative;
  height: auto;
}
<div class="spinner">
    <div class="loader>LOADING</div>
</div>

但这继承了父动画。这是问题的小提琴。

我尝试在.loader类中添加以下内容来尝试解决此问题：

animation: none !important;
animation: spin 2s linear infinite reverse; 

都不起作用。

这可以解决吗？或者我最好也尝试在文本上使用固定定位，而不是嵌套div标签？

Answer 1

也可以尝试将其放入另一个容器中，并逆转容器上的旋转

.loader {
  width: 120px;
  margin: 0 auto;
  position: relative;
  height: auto;
}
.spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -70px;
  margin-top: -50px;
  z-index: 2;
  width: 120px;
  height: 120px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  animation: spin 2s linear infinite;
}
.holder {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: spin 2s linear infinite reverse;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="spinner">
  <div class="holder">
    <div class="loader">
      LOADING ...
    </div>
  </div>
</div>

Answer 2

尝试这个，

    .loader {
      width: 120px;
      margin: 0 auto;
      position: relative;
      height: auto;
    }
    .holder {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-left: -70px;
      margin-top: -50px;
    }
    .spinner {
      width: 120px;
      height: 120px;
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #3498db;
      animation: spin 2s linear infinite;
    }
    
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

<div class="holder">
      <div class="spinner">
      </div>
      <div class="loader">
        LOADING ...
      </div>
    </div>