Firefox 上 CSS 动画前后的 SVG 模糊

Posted 2023-03-06

【中文标题】Firefox 上 CSS 动画前后的 SVG 模糊

【英文标题】：SVG blurry before and after CSS animation on Firefox

【发布时间】：2014-10-26 17:26:15

【问题描述】：

我想使用 CSS 转换为 SVG 徽标的某些部分设置动画。无动画的 SVG 渲染得非常好，在动画过程中，一切看起来都非常清晰。

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

这个问题只出现在我的 Mac 和 Windows 系统上的 Mozilla Firefox 中。在 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"  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”首先模糊，然后在移动时变得清晰，并在动画后再次模糊。 （提示：以全屏模式播放以了解我的意思）

对此有什么想法吗？

【问题讨论】：

我刚刚尝试使用 Firefox 35，对我来说，它看起来很完美....也许在最新版本中解决了？

【参考方案1】：

我认为这只是当前构建的一个限制。就像 webGL 或其他边缘东西一样——浏览器还不能很好地完成它——这不是你可以修复的东西，而是你需要解决的问题。直到它在未来的构建中完成（请注意，不能保证它会永远......） - 您可以尝试使用 transformZ hack，或者您可以使用 modernizr 对其进行测试，并在它没有的情况下省略它'看起来很酷。