Question

我正在尝试使用CSS变换为SVG文本元素设置动画。一切都像Firefox中的预期一样，但Chrome只显示文本应用了第一个关键帧规则。

我用-webkit前缀尝试了它，但仍然没有运气。

SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
      width="400px" height="400px" viewBox="0 0 400 400" >

    <text class="text-need" fill="#FFFFFF" font-size="136">Need</text>
</svg>

CSS

.text-need {
     font-family: sans-serif;
     animation: slideRight 1s ease-in-out forwards;
}

@keyframes slideRight {
    0% {
        transform: translate(0rem, 9rem);
    }
    100% {
        transform: translate(25rem, 9rem);
    }
}

Codepen

因为clipPath动画可以在Chrome中正常运行，但在Firefox中无法正常工作，所以它有点受欢迎。

Codepen

Answer 1

你的问题可能是由于缺少-webkit-prefix？

造成的

http://www.w3schools.com/css/css3_animations.asp

我不知道为什么你的第二个例子不适用于Firefox，但我想这也是一个浏览器兼容性问题......

SVG转换动画无法在Chrome中运行

1 个答案: