在Firefox上的CSS动画之前和之后的SVG模糊

我想用CSS变换为SVG徽标的部分制作动画。无生气的SVG渲染得非常好，在动画期间，所有东西看起来都很清晰。在Firefox上的CSS动画之前和之后的SVG模糊

但是，在填充状态下，即在动画延迟和动画完成后，Firefox完全模糊了图形的动画部分。

只有在Mozilla Firefox中，我的Mac和Windows系统都会出现此问题。在铬和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”仍然尖锐，而“鸥”首先被模糊，然后移动时尖锐和动画之后再次模糊。（提示：在全屏模式下播放以查看我的意思）

对此有何看法？

来源

2014-09-02 Peter Sorowka

我刚刚尝试使用Firefox 35，对我来说，它看起来很完美....也许在最新版本中解决了？ – 2015-01-28 14:17:05

我认为这只是当前版本的限制。像webGL，或其他边缘的东西 - 浏览器做得不好 - 它不是真正的东西，你可以修复，但你的工作。直到它在将来的版本中完成（请注意，它不会保证它将永远......） - 您可以尝试transformZ hack，或者您可以使用modernizr进行测试，并且在它不会在“看起来很酷。

来源

2015-02-09 15:49:43

在Firefox上的CSS动画之前和之后的SVG模糊

回答

相关问题