我正在尝试使用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);
}
}
因为clipPath
动画可以在Chrome中正常运行,但在Firefox中无法正常工作,所以它有点受欢迎。
答案 0 :(得分:0)
你的问题可能是由于缺少-webkit-prefix?
造成的http://www.w3schools.com/css/css3_animations.asp
我不知道为什么你的第二个例子不适用于Firefox,但我想这也是一个浏览器兼容性问题......