将关键帧转换为 JS and/or 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

您有 2 个问题：
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>

将关键帧转换为 JS and/or GSAP

Convert keyframes to JS and/or GSAP

css

gsap