css - Firefox中剪辑路径上的动画translateY

为什么以下clipPath在Chrome中创建动画，但在Firefox中不动画？

http://jsfiddle.net/H8S3k/67/

.graph {
  transform: translateY(150px);
  animation: 2s ease-out 0s normal none infinite popup;
}
@keyframes popup {
  0% {
    transform: translateY(50px);
  }
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(50px);
  }
}

最佳答案

在SVG 1.1中，仅某些属性被认为可以用CSS设置样式。这些特定的属性集称为“属性”。您可以在此处查看指定属性的列表：

https://www.w3.org/TR/SVG/propidx.html

transform不是其中之一，因此无法使用CSS设置样式。

但是，在尚未完成的SVG 2中，所有SVG属性都可能是可样式化的。 Chrome已开始实施此功能，但Firefox尚未实施。这就是为什么您的示例在Chrome而不是Firefox中可以工作的原因。

关于css - Firefox中剪辑路径上的动画translateY，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38065126/