在 Firefox 中的 clipPath 上动画 translateY答案

【问题标题】：Animating translateY on a clipPath in Firefox在 Firefox 中的 clipPath 上动画 translateY
【发布时间】：2016-06-28 17:10:45
【问题描述】：

为什么下面的 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);
  }
}

【问题讨论】：

在某些时候，基于 CSS 的 svg 动画在 Mozilla 中停止工作，人们可以很容易地找到关于这个问题的大量报告。如果您的动画必须在 Mozilla 中运行，我建议您使用 <animate>。
不支持 Internet Explorer :/
如果你需要跨浏览器的svg动画，我建议你开始here。你最好使用 javascript，至少现在是这样。
同样的问题：jsfiddle.net/H8S3k/71 适用于 Chrome，不适用于 Firefox。
编辑：使用 transform 属性，即不是 css 属性：jsfiddle.net/H8S3k/72。哇！

标签： css firefox svg

【解决方案1】：

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

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

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

然而，在尚未最终确定的 SVG 2 中，所有 SVG 属性可能都可以设置样式。 Chrome 已经开始实现这一点，但是 Firefox 还没有。这就是为什么您的示例适用于 Chrome 而不是 Firefox。

【讨论】：