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

时间:2014-06-01 22:07:15

标签: css google-chrome svg

我正在尝试使用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

1 个答案:

答案 0 :(得分:0)

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

造成的

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

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