我希望使用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>
对此有何想法?