Question

我想用CSS转换为SVG徽标的部分动画制作动画。无动画的SVG呈现得非常精细，在动画期间，每件事看起来都很清晰。

然而，在填充状态下，即在动画延迟期间和完成动画之后，firefox完全模糊了图形的动画部分。

该问题仅在我的Mac和Windows系统上的Mozilla Firefox中出现。在chrome和safari中，它看起来像预期的那样。

＆＃13;

  #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);
    }
  }

＆＃13;

<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>

＆＃13;

我已将svg代码最小化以证明：字母＆＃39; b＆＃39;仍然是尖锐的，而海鸥＆＃39;首先是模糊，然后移动时锐利，动画后再次模糊。（提示：以全屏模式播放以查看我的意思）

对此有何想法？

Answer 1

我认为这只是当前版本的限制。就像webGL或其他优势一样 - 浏览器还没有做得好 - 它不是你可以解决的东西，而是你可以解决的问题。直到它在未来的构建中完成（注意，不能保证它将永远......） - 你可以尝试transformZ hack，或者你可以用modernizr测试它，并在它没有＆＃的情况下省略它39;看起来很酷。

Firefox上CSS动画前后的SVG模糊

1 个答案: