css - 将关键帧转换为 JS 和/或 GSAP

Question

我花了太长时间试图让 CSS 动画在 MS Edge 上工作以保证它的使用，但我想我会在这里问，因为在我失去更多头发之前解决它会是一件好事。

我有一个用 CSS 制作动画的 SVG，它在 Chrome 和 Firefox 中运行良好，我将它制作成这样的动画:

svg {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: innerRotator 1.4s ease-in-out infinite;
}

innerRotator 看起来像这样:

@keyframes innerRotator {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        transform: rotate(450deg);
    }
}

我已经尝试并试图解决这个问题，以便它可以在 Edge 上运行，并认为 GSAP 可能会成功，但我的 GSAP-foo 并不强大，这是我所能做到的。 .. 结果不佳我可能会补充。

var $spinner = $(".svg_spinner");
var tl = new TimelineLite();
tl.to($spinner, 0.7, {
    strokeDashoffset:46.75
}).to($spinner, 0.7, {
    strokeDashoffset:187
}).to($spinner, 0.7, {
    strokeDashoffset:46.75
});

不用说，它不起作用。

如有任何帮助，我们将不胜感激。

感谢您的评论:-)

到目前为止我尝试过的 JSFiddle 在这里:https://jsfiddle.net/annoyingmouse/64hv2328/ innerRotator 是主要问题，因为外部旋转器是一种享受。我在 HTML 中用 smil 替换了它，这有点管用，但不太流畅。

Answer 1

你有两个问题:
1. 您忘记为 stroke-dasharray 和 stroke-dashoffset 指定 Edge 所需的单位。
2. IE 和 Edge do not support CSS transforms on SVG elements .

请查看以下代码段中可能的解决方案:

.icon {
  display: block;
  animation: rotator .7s linear infinite;
  width: 65px !important;
  height: 65px !important;
  overflow: visible;
}

.icon circle {
  stroke-dasharray: 187px;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: innerRotator 2.8s ease-in-out infinite;
}

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

@keyframes innerRotator {
  0% {
    stroke-dashoffset: 187px;
  }
  50% {
    stroke-dashoffset: 46.75px;
  }
  100% {
    stroke-dashoffset: 187px;
  }
}

<svg class="iconsvg icon">
    <circle class="svg_spinner" fill="none" stroke-width="6" stroke="black" stroke-linecap="round" cx="32.5" cy="32.5" r="30"/>
</svg>