在 css 中打破无限动画

Question

我正在使用 css keyframes 动画使圆环围绕图像旋转。设计是这样的：

对于这个目标，我使用这个 css 样式：

    .upload-logo {
      width: 150px;
      height: 150px;
      position: relative;
      cursor: pointer;
      .rings {
        border-right: 12px solid #a3a1fb;
        border-left: 12px solid #edecfe;
        border-radius: 50%;
        border-top: 12px solid #a3a1fb;
        border-bottom: 12px solid #edecfe;
        width: 100%;
        height: 100%;

        @-webkit-keyframes rotating /* Safari and Chrome */ {
          from {
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          to {
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
        @keyframes rotating {
          from {
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          to {
            -ms-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
        &.rotating {
          -webkit-animation: rotating 2s linear infinite;
          -moz-animation: rotating 2s linear infinite;
          -ms-animation: rotating 2s linear infinite;
          -o-animation: rotating 2s linear infinite;
          animation: rotating 2s linear infinite;
        }
      }

这样，圆环，绕里面的圆旋转，同时圆环有classrotating。当我开始旋转时一切正常，现在的问题是：

如何打破无限动画，但让当前循环完成。

现在，我正在删除 rotating class 并且环突然回滚到其初始状态，这确实很糟糕。我只想从动画参数中删除 infinite 描述符，让它完成你的工作并停止。

更新

我测试了一种方法，但还不完整。解决方案是向名为 stop 的元素添加另一个 class。然后为此 class 我写了这些样式：

        .stop{
          -webkit-animation-iteration-count: 1;
          -moz-animation-iteration-count: 1;
          -ms-animation-iteration-count: 1;
          -o-animation-iteration-count: 1;
          animation-iteration-count: 1;
        }

现在，如果作业在第一轮的中间完成，它工作正常并通过完成该轮完成，但如果在后面的轮数中，它会突然再次中断。

Answer 1

如果您不想恢复到初始状态，则可以通过添加以下内容来暂停动画 css 并将此 class 添加到您的元素

.paused {
   -webkit-animation-play-state: paused !important;
   -moz-animation-play-state: paused !important;
   -o-animation-play-state: paused !important; 
   animation-play-state: paused !important;
}

Answer 2

没有办法 javascript.You 需要使用 "animationiteration" 事件删除 "rotating" class。因此，每当您决定将当前迭代设置为最后一次迭代时，请将 "on" 或 "one" EventHandler 添加到您的元素并在侦听器中删除动画 class.

这应该可以完成工作：

$(".rings").one('animationiteration', function() {
    $(this).removeClass("rotating");
});

在 css 中打破无限动画

Break infinite animation in css

css

animation

infinite-loop

更新