javascript - 替代 CSS 中的关键帧？

Question

我需要创建一个加载微调器，目前我正在使用以下代码。

我想知道是否可以使用 keyframes 的替代语法重写它(也许是过渡？)。

不幸的是，我正在使用重写 keyframes 属性的构建工具，添加错误和 CSS generated is not working所以我想解决这个问题。

JS 解决方案也是可能的，添加 CSS 内联。

.loadingSpinner {
    width: 50px;
    height: 50px;
    border: 5px solid #3498db;
    border-top-color: rgba(0, 0, 0, 0);
    border-left-color: rgba(0, 0, 0, 0);
    border-radius: 50%;
    -moz-animation: loadingSpinner 0.7s infinite linear;
    -o-animation: loadingSpinner 0.7s infinite linear;
    -webkit-animation: loadingSpinner 0.7s infinite linear;
    animation: loadingSpinner 0.7s infinite linear;
}

@-moz-keyframes loadingSpinner {
  0%   {
      -moz-transform: rotate(0deg);

  }
  100% {
      -moz-transform: rotate(360deg);
  }
}

@-o-keyframes loadingSpinner {
  0%   {
      -o-transform: rotate(0deg);

  }
  100% {
      -o-transform: rotate(360deg);
  }
}

@-webkit-keyframes loadingSpinner {
  0%   {
      -webkit-transform: rotate(0deg);

  }
  100% {
      -webkit-transform: rotate(360deg);
  }
}

@keyframes loadingSpinner {
  0%   {
      transform: rotate(0deg);

  }
  100% {
      transform: rotate(360deg);
  }
}

<div class="loadingSpinner"></div>

Answer 1

您可以使用很长的过渡并用快速的 js 行触发它。例如，添加一个 .start 类来触发一个 60 秒的转换，该转换将微调器旋转几次(例如，36000 度)。

.loadingSpinner {
    width: 50px;
    height: 50px;
    border: 5px solid #3498db;
    border-top-color: rgba(0, 0, 0, 0);
    border-left-color: rgba(0, 0, 0, 0);
    border-radius: 50%;
    transform: rotate(0deg);
    transition: transform 60s;
}

.loadingSpinner.start {
    transform: rotate(36000deg);
}

示例:https://jsfiddle.net/6tkf1f95/1/