火狐浏览器中CSS动画前后SVG模糊问题

Question

我希望使用CSS transforms来动画化SVG标志的某些部分。未动画化的SVG呈现得非常完美，即使在动画期间，一切看起来都清晰明了。

然而，在填充状态下，也就是在动画延迟和完成后，火狐浏览器会完全模糊图形的动画部分。

这个问题只出现在Mozilla Firefox浏览器中，在我的Mac和Windows系统上都是如此。在Chrome和Safari中，它看起来就像预期的那样。

  #gull {
    fill: #59E9CF;
    -webkit-animation: gull-flight 5s linear 3s 1 normal both;
    -moz-animation: gull-flight 5s linear 3s 1 normal both;
    animation: gull-flight 5s linear 5s 1 normal both;
  }
  @keyframes gull-flight {
    0% {
      transform: matrix(0.976, -0.216, 0.216, 0.976, -9.5, 71.6);
      fill: #404041;
    }
    100% {
      transform: matrix(1, 0, 0, 1, 0, 0);
    }
  }
  @-webkit-keyframes gull-flight {
    0% {
      transform: matrix(0.976, -0.216, 0.216, 0.976, -9.5, 71.6);
      fill: #404041;
    }
    100% {
      transform: matrix(1, 0, 0, 1, 0, 0);
    }
  }

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 808 138" version="1.1">
  <path d="M11.0944925 129.4 L11.0944925 23.2 C11.0944925 20.3 9.6 18.8 6.5 18.7 L-0.00275138279 18.3 L-0.00275138279 3 L32.5369357 3 L32.5369357 46.8 C38.0855577 41.7 45.5 39.1 54.9 39.1 C66.4981706 39.1 75.7 43 82.5 50.8 C89.2337637 58.7 92.6 69.7 92.6 83.9 C92.6271358 119.5 77.7 137.3 47.9 137.3 C41.4789298 137.3 34.7 136.6 27.6 135 C20.5592493 133.5 15 131.6 11.1 129.4 M32.5369357 69.4 L32.5369357 117.4 C37.2234577 119.8 42.6 121.1 48.8 121.1 C62.8663453 121.1 69.9 109.6 69.9 86.8 C69.8915427 66 63 55.5 49.2 55.5 C44.743904 55.5 40.9 56.8 37.5 59.4 C34.2061079 62 32.5 65.3 32.5 69.4"
  />
  <path d="M150.264937 17 C157.180079 18.5 161.5 22.4 163.2 28.6 C164.333674 32.6 164.6 37.6 164 43.5 L176.008708 55.3 L191.517336 49.9 C193.470818 44.1 196 39.6 199.3 36.2 C203.705962 31.6 209.4 30.1 216.3 31.7 C220.80122 32.7 224.2 34.7 226.5 37.6 L245.88466 30.8 C243.912835 28.4 241.4 25.9 238.4 23.6 C233.87946 20.1 228 17.6 220.8 16 C210.465192 13.7 200.3 14.8 190.3 19.4 C188.123964 20.5 186 21.9 184 23.5 C183.510812 22.1 182.9 20.8 182.2 19.6 C180.099097 15.9 176.8 12.4 172.3 8.9 C167.855444 5.4 162 2.9 154.8 1.3 C144.441176 -1 134.3 0.1 124.3 4.7 L137.938742 18.1 C141.478854 16.3 145.6 15.9 150.3 17"
  id="gull" />
</svg>

我已经将SVG代码最小化以演示：字母“b”保持锐利，而“gull”在移动时首先变模糊，然后变得锐利，并在动画结束后再次变模糊。（提示：全屏模式下播放以了解我的意思）

对此有何想法？

- Peter Sorowka

---

我刚刚尝试了Firefox 35，对我来说看起来完美...也许在最新版本中已经解决了？ - Luca Detomi

Answer 1

我认为这只是当前版本的限制。就像webGL或其他边缘技术一样-浏览器还没有很好地实现它-这不是你可以修复的东西，而是你需要解决的问题。在以后的版本中得到改善之前（请注意，不能保证会有改善......）-您可以尝试使用transformZ hack，或者使用modernizr测试它，并在不酷时省略它。

- user4533873