在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模糊

回答

相關問題