CSS 动画错误，它并不总是有效

Question

我的 CSS 动画有问题，它有时会起作用，当我刷新页面时，动画消失，我应该删除 CSS 并保存，然后再次粘贴 CSS 并重建解决方案以使其再次出现，这是为什么，有帮助吗？

.loader {
  border: 16px solid #f3f3f3; /\* Light grey */
  border-top: 16px solid #999999; /* Blue \*/
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

下面是加载器div

<div class="col-lg-4 col-md-4 col-sm-4 justify-content-center text-center loader"></div>

我尝试将 CSS 放入 HTML 页面中，一切正常，当我将 CSS 移动到 MyFile.CSS 时会发生此问题（适用于内联 CSS，但不适用于外页 CSS）

Answer 1

我对 CSS 代码做了一些更改。尝试一下：

.loader {
  border: 16px solid #f3f3f3; 
  border-top-color: #999999;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="col-lg-4 col-md-4 col-sm-4 justify-content-center text-center loader"></div>