我有一个SVG显示在我的网页上。我声明了一个动画动画。它在Chrome上工作正常,但在Mozilla浏览器上不工作。
这是我的SVG示例。
<svg width="400" height="110">
<circle class="myCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
在我的SASS文件中,我有以下示例:
.myCircle
{
animation: animateCircle 5s;
-moz-animation: animateCircle 5s;
-webkit-animation: animateCircle 5s;
-ms-animation: animateCircle 5s;
}
@keyframes animateCircle
{
70% {
cy: 80
}
}
@-moz-keyframes animateCircle
{
70% {
cy: 80
}
}
@-webkit-keyframes animateCircle
{
70% {
cy: 80
}
}
该示例代码在Chrome上可以工作,但在Mozilla中,它就不能按预期工作。
这是codepen:,它在chrome上工作,但在mozilla中,它甚至不动。
1条答案
按热度按时间pjngdqdw1#
在CSS中,0以外的值必须有单位。恐怕你已经发现了一个Chrome的bug,因为Firefox的实现是正确的。
所有moz和webkit的东西也不再需要了。