Question

我花了很长时间试图让一个CSS动画在MS Edge上工作，以保证它的使用，但我想在这里问，因为在我再失去头发之前解决这个问题会很好。< / p>

我有一个使用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.您忘记指定Edge中所需的stroke-dasharray和stroke-dashoffset单位 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和/或GSAP

1 个答案: