以下动画在最新的Chrome和FF中运行，但Safari并未遵循已定义的@Keyframes。你能帮忙解决这个问题吗？
问题是Safari的不透明度不遵循已定义的@Keyframes并在整个动画过程中“散布”填充不透明度，而不是使用@Keyframese的0％，30％，90％和100％来控制不透明度。这样做的目的是，填充不透明度只能从关键帧的动画时间的90％和100％开始，而不是从开始。
Chrome-很好：https://imgur.com/zfNuV2r
Safari-错误：https://imgur.com/AkmaAwA
path.syncron {
stroke: #2d3f50;
fill: #2d3f50;
stroke-dasharray: 266;
opacity: 10;
-moz-animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
-webkit-animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
}
path.dot {
stroke: #e64d3c;
fill: #e64d3c;
stroke-dasharray: 52;
opacity: 10;
-moz-animation: dot 2s cubic-bezier(0,0.23,1,0.1);
-webkit-animation: dot 2s cubic-bezier(0,0.23,1,0.1);
animation: dot 2s cubic-bezier(0,0.23,1,0.1);
}
/*Syncron Logo animation*/
@keyframes syncron {
0% {opacity: 0; fill: none; stroke-dasharray: 266;}
30% {opacity: 0; fill: none; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0);}
100% {opacity: 10; fill: rgba(45,63,80,1); stroke-dasharray: 0;}
}
@-webkit-keyframes syncron {
0% {opacity: 0; fill: none; stroke-dasharray: 266;}
30% {opacity: 0; fill: none; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0);}
100% {opacity: 1.0; fill: rgba(45,63,80,1); stroke-dasharray: 0;}
}
@-moz-keyframes syncron {
0% {opacity: 0; fill: none; stroke-dasharray: 266;}
30% {opacity: 0; fill: none; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0);}
100% {opacity: 10; fill: rgba(45,63,80,1); stroke-dasharray: 0;}
}
@keyframes dot {
0% {opacity: 0; fill: none; stroke-dasharray: 52;}
30% {opacity: 0; fill: none; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0);}
100% {opacity: 10; fill: rgba(230,77,60,1); stroke-dasharray: 0;}
}
@-webkit-keyframes dot {
0% {opacity: 0; fill: none; stroke-dasharray: 52;}
30% {opacity: 0; fill: none; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0);}
100% {opacity: 10; fill: rgba(230,77,60,1); stroke-dasharray: 0;}
}
@-moz-keyframes dot {
0% {opacity: 0; fill: none; stroke-dasharray: 52;}
30% {opacity: 0; fill: none; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0);}
100% {opacity: 10; fill: rgba(230,77,60,1); stroke-dasharray: 0;}
} <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="409.11px" height="77.54" viewBox="0 0 409.11 105.75">
<style type="text/css">
.syncron{fill:none;stroke:none;stroke-miterlimit:10;}
.dot{fill:none;stroke:none;stroke-miterlimit:10;}
</style>
<title>.syncron Logo | All rights reserved (c) 2019 Syncron</title>
<a class="hide-on-fallback">
<g>
<path class="syncron" d="M52.97,69.78c7.4,0,11.11-2.37,11.11-7.1c0-1.47-0.73-2.58-2.2-3.35c-1.47-0.77-3.32-1.45-5.55-2.05
c-2.24-0.6-4.65-1.22-7.25-1.85c-2.6-0.63-5.02-1.52-7.25-2.65c-2.24-1.13-4.09-2.62-5.55-4.45c-1.47-1.83-2.2-4.08-2.2-6.75
c0-2.67,0.4-4.97,1.2-6.9c0.8-1.93,2-3.6,3.6-5c3.53-3,8.44-4.5,14.71-4.5c5,0,9.84,0.83,14.51,2.5c0.93,0.33,1.65,0.87,2.15,1.6
c0.5,0.73,0.75,1.55,0.75,2.45s-0.38,1.75-1.15,2.55c-0.77,0.8-1.52,1.2-2.25,1.2c-0.73,0-1.64-0.17-2.7-0.5
c-3.2-1-6.7-1.5-10.51-1.5s-6.69,0.67-8.65,2c-1.97,1.34-2.95,2.94-2.95,4.8c0,1.87,0.75,3.25,2.25,4.15
c1.5,0.9,3.35,1.65,5.55,2.25c2.2,0.6,4.62,1.2,7.25,1.8c2.63,0.6,5.05,1.44,7.25,2.5c5.2,2.67,7.8,6.8,7.8,12.41
c0,4.27-1.6,7.74-4.8,10.41c-3.47,2.94-8.31,4.4-14.51,4.4c-6.74,0-12.81-1.5-18.21-4.5c-1.14-0.8-1.7-1.8-1.7-3
c0-1.2,0.37-2.22,1.1-3.05c0.73-0.83,1.53-1.25,2.4-1.25c0.87,0,1.9,0.27,3.1,0.8C44.13,68.92,48.36,69.78,52.97,69.78z"/>
<path class="syncron" d="M126.51,27.01c0.87,0.9,1.3,1.84,1.3,2.8c0,0.97-0.1,1.69-0.3,2.15L100.19,97.6c-0.87,2.07-2.27,3.1-4.2,3.1
c-1.2,0-2.22-0.43-3.05-1.3c-0.83-0.87-1.25-1.74-1.25-2.6c0-0.87,0.1-1.57,0.3-2.1l6.5-16.71L79.68,32.16
c-0.27-0.67-0.4-1.47-0.4-2.4c0-0.93,0.43-1.85,1.3-2.75c0.87-0.9,1.83-1.35,2.9-1.35c2.2,0,3.7,0.93,4.5,2.8l15.41,38.22
l15.71-38.02c0.87-2,2.27-3,4.2-3C124.57,25.66,125.64,26.11,126.51,27.01z"/>
<path class="syncron" d="M163.63,33.56c-5.87,0-11.34,3.2-16.41,9.61v30.02c0,1.27-0.45,2.33-1.35,3.2c-0.9,0.87-1.99,1.3-3.25,1.3
c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26c0-1.33,0.43-2.43,1.3-3.3c0.87-0.87,1.93-1.3,3.2-1.3
c1.27,0,2.35,0.43,3.25,1.3c0.9,0.87,1.35,1.97,1.35,3.3v4.1c2.67-2.8,4.97-4.77,6.9-5.9c3.8-2.2,7.42-3.3,10.86-3.3
c3.43,0,6.25,0.52,8.45,1.55c2.2,1.04,4.07,2.45,5.6,4.25c3.13,3.67,4.7,8.27,4.7,13.81v28.42c0,1.27-0.45,2.33-1.35,3.2
c-0.9,0.87-1.99,1.3-3.25,1.3c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V45.77c0-3.8-0.85-6.79-2.55-8.96
C170.38,34.65,167.56,33.56,163.63,33.56z"/>
<path class="syncron" d="M223.26,69.68c3.74,0,7.3-0.93,10.71-2.8c1.2-0.67,2.27-1,3.2-1c0.93,0,1.77,0.43,2.5,1.3
c0.73,0.87,1.1,1.9,1.1,3.1c0,1.2-0.77,2.3-2.3,3.3c-4.74,3.07-10.07,4.6-16.01,4.6c-7.4,0-13.64-2.33-18.71-7
c-5.34-4.94-8-11.44-8-19.51c0-8.07,2.67-14.57,8-19.51c5.07-4.67,11.31-7,18.71-7c4,0,7.29,0.52,9.86,1.55
c2.57,1.04,4.62,2.05,6.15,3.05c1.53,1,2.3,2.1,2.3,3.3s-0.37,2.24-1.1,3.1c-0.73,0.87-1.47,1.3-2.2,1.3c-1.14,0-2.3-0.33-3.5-1
c-3.4-1.87-6.97-2.8-10.71-2.8c-5.87,0-10.41,1.65-13.61,4.95c-3.2,3.3-4.8,7.65-4.8,13.06c0,5.4,1.6,9.76,4.8,13.06
C212.85,68.03,217.39,69.68,223.26,69.68z"/>
<path class="syncron" d="M261.78,34.56c4.67-6.27,9.91-9.41,15.71-9.41h0.5c1.27,0,2.32,0.43,3.15,1.3c0.83,0.87,1.25,1.95,1.25,3.25
s-0.43,2.34-1.3,3.1c-0.87,0.77-1.97,1.15-3.3,1.15h-0.5c-3.34,0-6.32,0.82-8.96,2.45c-2.64,1.64-4.82,3.75-6.55,6.35v30.42
c0,1.27-0.45,2.33-1.35,3.2c-0.9,0.87-1.99,1.3-3.25,1.3c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26
c0-1.27,0.43-2.35,1.3-3.25c0.87-0.9,1.93-1.35,3.2-1.35c1.27,0,2.35,0.45,3.25,1.35c0.9,0.9,1.35,1.99,1.35,3.25V34.56z"/>
<path class="syncron" d="M313.91,25.16c7.74,0,13.94,2.44,18.61,7.3c4.67,4.94,7,11.34,7,19.21c0,7.87-2.34,14.28-7,19.21
c-4.67,4.87-10.87,7.3-18.61,7.3c-7.8,0-14.01-2.43-18.61-7.3c-4.67-4.87-7-11.27-7-19.21c0-7.94,2.33-14.34,7-19.21
C299.9,27.59,306.11,25.16,313.91,25.16z M302.76,65.73c1.57,1.44,3.33,2.49,5.3,3.15c1.97,0.67,3.9,1,5.8,1c1.9,0,3.83-0.33,5.8-1
c1.97-0.67,3.75-1.7,5.35-3.1c3.6-3.27,5.4-8,5.4-14.21c0-6-1.8-10.67-5.4-14.01c-3-2.73-6.7-4.1-11.11-4.1
c-7.2,0-12.21,3.24-15.01,9.71c-1,2.34-1.5,5.15-1.5,8.46c0,3.3,0.5,6.12,1.5,8.46S301.19,64.3,302.76,65.73z"/>
<path class="syncron" d="M377.75,33.56c-5.87,0-11.34,3.2-16.41,9.61v30.02c0,1.27-0.45,2.33-1.35,3.2s-1.99,1.3-3.25,1.3
c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26c0-1.33,0.43-2.43,1.3-3.3c0.87-0.87,1.93-1.3,3.2-1.3
c1.27,0,2.35,0.43,3.25,1.3c0.9,0.87,1.35,1.97,1.35,3.3v4.1c2.67-2.8,4.97-4.77,6.9-5.9c3.8-2.2,7.42-3.3,10.86-3.3
s6.25,0.52,8.46,1.55c2.2,1.04,4.07,2.45,5.6,4.25c3.13,3.67,4.7,8.27,4.7,13.81v28.42c0,1.27-0.45,2.33-1.35,3.2
s-1.99,1.3-3.25,1.3c-1.27,0-2.33-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V45.77c0-3.8-0.85-6.79-2.55-8.96
C384.5,34.65,381.68,33.56,377.75,33.56z"/>
</g>
<g>
<path class="dot" d="M16.31,62.08h4c1.93,0,3.28,0.37,4.05,1.1c0.77,0.73,1.15,2.07,1.15,4v4.8c0,1.94-0.38,3.29-1.15,4.05
c-0.77,0.77-2.12,1.15-4.05,1.15h-4c-1.94,0-3.29-0.38-4.05-1.15c-0.77-0.77-1.15-2.12-1.15-4.05v-4.8c0-1.93,0.38-3.27,1.15-4
C13.02,62.45,14.37,62.08,16.31,62.08z"/>
</g>
</a>
</svg>
答案 0 :(得分：1)
我找到了答案。解决方案是为所有fill: rbga()定义@keyframes。 Chrome和Firefox似乎比Safari更宽容。因此，我添加了fill: rbga()，作为奖励，我还添加了一个stroke-opacity值，以与通过rgba()
在Chrome，Firefox，Safari和移动浏览器上可用的最终代码为：
path.syncron {
stroke: #2d3f50;
fill: #2d3f50;
stroke-dasharray: 266;
opacity: 1;
-moz-animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
-webkit-animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
}
path.dot {
stroke: #e64d3c;
fill: #e64d3c;
stroke-dasharray: 52;
opacity: 1;
-moz-animation: dot 2s cubic-bezier(0,0.23,1,0.1);
-webkit-animation: dot 2s cubic-bezier(0,0.23,1,0.1);
animation: dot 2s cubic-bezier(0,0.23,1,0.1);
}
/*Syncron Logo animation*/
@keyframes syncron {
0% {fill: rgba(45,63,80,0); stroke-opacity: 0; stroke-dasharray: 266;}
30% {fill: rgba(45,63,80,0); stroke-opacity: 0.5; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0); stroke-opacity: 1;}
100% {fill: rgba(45,63,80,1); stroke-opacity: 1; stroke-dasharray: 0;}
}
@-webkit-keyframes syncron {
0% {fill: rgba(45,63,80,0); stroke-opacity: 0; stroke-dasharray: 266;}
30% {fill: rgba(45,63,80,0); stroke-opacity: 0.5; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0); stroke-opacity: 1;}
100% {fill: rgba(45,63,80,1); stroke-opacity: 1; stroke-dasharray: 0;}
}
@-moz-keyframes syncron {
0% {fill: rgba(45,63,80,0); stroke-opacity: 0; stroke-dasharray: 266;}
30% {fill: rgba(45,63,80,0); stroke-opacity: 0.5; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0); stroke-opacity: 1;}
100% {fill: rgba(45,63,80,1); stroke-opacity: 1; stroke-dasharray: 0;}
}
@keyframes dot {
0% {fill: rgba(230,77,60,0); stroke-opacity: 0; stroke-dasharray: 52;}
30% {fill: rgba(230,77,60,0); stroke-opacity: 0.5; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0); stroke-opacity: 1;}
100% {fill: rgba(230,77,60,1); stroke-opacity: 1; stroke-dasharray: 0;}
}
@-webkit-keyframes dot {
0% {fill: rgba(230,77,60,0); stroke-opacity: 0; stroke-dasharray: 52;}
30% {fill: rgba(230,77,60,0); stroke-opacity: 0.5; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0); stroke-opacity: 1;}
100% {fill: rgba(230,77,60,1); stroke-opacity: 1; stroke-dasharray: 0;}
}
@-moz-keyframes dot {
0% {fill: rgba(230,77,60,0); stroke-opacity: 0; stroke-dasharray: 52;}
30% {fill: rgba(230,77,60,0); stroke-opacity: 0.5; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0); stroke-opacity: 1;}
100% {fill: rgba(230,77,60,1); stroke-opacity: 1; stroke-dasharray: 0;}
}<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="409.11px" height="77.54" viewBox="0 0 409.11 105.75">
<style type="text/css">
.syncron {
fill: none;
stroke: none;
stroke-miterlimit: 10;
}
.dot {
fill: none;
stroke: none;
stroke-miterlimit: 10;
}
</style>
<title>.syncron Logo | All rights reserved (c) 2019 Syncron</title>
<a class="hide-on-fallback">
<g>
<path class="syncron"
d="M52.97,69.78c7.4,0,11.11-2.37,11.11-7.1c0-1.47-0.73-2.58-2.2-3.35c-1.47-0.77-3.32-1.45-5.55-2.05
c-2.24-0.6-4.65-1.22-7.25-1.85c-2.6-0.63-5.02-1.52-7.25-2.65c-2.24-1.13-4.09-2.62-5.55-4.45c-1.47-1.83-2.2-4.08-2.2-6.75
c0-2.67,0.4-4.97,1.2-6.9c0.8-1.93,2-3.6,3.6-5c3.53-3,8.44-4.5,14.71-4.5c5,0,9.84,0.83,14.51,2.5c0.93,0.33,1.65,0.87,2.15,1.6
c0.5,0.73,0.75,1.55,0.75,2.45s-0.38,1.75-1.15,2.55c-0.77,0.8-1.52,1.2-2.25,1.2c-0.73,0-1.64-0.17-2.7-0.5
c-3.2-1-6.7-1.5-10.51-1.5s-6.69,0.67-8.65,2c-1.97,1.34-2.95,2.94-2.95,4.8c0,1.87,0.75,3.25,2.25,4.15
c1.5,0.9,3.35,1.65,5.55,2.25c2.2,0.6,4.62,1.2,7.25,1.8c2.63,0.6,5.05,1.44,7.25,2.5c5.2,2.67,7.8,6.8,7.8,12.41
c0,4.27-1.6,7.74-4.8,10.41c-3.47,2.94-8.31,4.4-14.51,4.4c-6.74,0-12.81-1.5-18.21-4.5c-1.14-0.8-1.7-1.8-1.7-3
c0-1.2,0.37-2.22,1.1-3.05c0.73-0.83,1.53-1.25,2.4-1.25c0.87,0,1.9,0.27,3.1,0.8C44.13,68.92,48.36,69.78,52.97,69.78z" />
<path class="syncron" d="M126.51,27.01c0.87,0.9,1.3,1.84,1.3,2.8c0,0.97-0.1,1.69-0.3,2.15L100.19,97.6c-0.87,2.07-2.27,3.1-4.2,3.1
c-1.2,0-2.22-0.43-3.05-1.3c-0.83-0.87-1.25-1.74-1.25-2.6c0-0.87,0.1-1.57,0.3-2.1l6.5-16.71L79.68,32.16
c-0.27-0.67-0.4-1.47-0.4-2.4c0-0.93,0.43-1.85,1.3-2.75c0.87-0.9,1.83-1.35,2.9-1.35c2.2,0,3.7,0.93,4.5,2.8l15.41,38.22
l15.71-38.02c0.87-2,2.27-3,4.2-3C124.57,25.66,125.64,26.11,126.51,27.01z" />
<path class="syncron" d="M163.63,33.56c-5.87,0-11.34,3.2-16.41,9.61v30.02c0,1.27-0.45,2.33-1.35,3.2c-0.9,0.87-1.99,1.3-3.25,1.3
c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26c0-1.33,0.43-2.43,1.3-3.3c0.87-0.87,1.93-1.3,3.2-1.3
c1.27,0,2.35,0.43,3.25,1.3c0.9,0.87,1.35,1.97,1.35,3.3v4.1c2.67-2.8,4.97-4.77,6.9-5.9c3.8-2.2,7.42-3.3,10.86-3.3
c3.43,0,6.25,0.52,8.45,1.55c2.2,1.04,4.07,2.45,5.6,4.25c3.13,3.67,4.7,8.27,4.7,13.81v28.42c0,1.27-0.45,2.33-1.35,3.2
c-0.9,0.87-1.99,1.3-3.25,1.3c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V45.77c0-3.8-0.85-6.79-2.55-8.96
C170.38,34.65,167.56,33.56,163.63,33.56z" />
<path class="syncron" d="M223.26,69.68c3.74,0,7.3-0.93,10.71-2.8c1.2-0.67,2.27-1,3.2-1c0.93,0,1.77,0.43,2.5,1.3
c0.73,0.87,1.1,1.9,1.1,3.1c0,1.2-0.77,2.3-2.3,3.3c-4.74,3.07-10.07,4.6-16.01,4.6c-7.4,0-13.64-2.33-18.71-7
c-5.34-4.94-8-11.44-8-19.51c0-8.07,2.67-14.57,8-19.51c5.07-4.67,11.31-7,18.71-7c4,0,7.29,0.52,9.86,1.55
c2.57,1.04,4.62,2.05,6.15,3.05c1.53,1,2.3,2.1,2.3,3.3s-0.37,2.24-1.1,3.1c-0.73,0.87-1.47,1.3-2.2,1.3c-1.14,0-2.3-0.33-3.5-1
c-3.4-1.87-6.97-2.8-10.71-2.8c-5.87,0-10.41,1.65-13.61,4.95c-3.2,3.3-4.8,7.65-4.8,13.06c0,5.4,1.6,9.76,4.8,13.06
C212.85,68.03,217.39,69.68,223.26,69.68z" />
<path class="syncron"
d="M261.78,34.56c4.67-6.27,9.91-9.41,15.71-9.41h0.5c1.27,0,2.32,0.43,3.15,1.3c0.83,0.87,1.25,1.95,1.25,3.25
s-0.43,2.34-1.3,3.1c-0.87,0.77-1.97,1.15-3.3,1.15h-0.5c-3.34,0-6.32,0.82-8.96,2.45c-2.64,1.64-4.82,3.75-6.55,6.35v30.42
c0,1.27-0.45,2.33-1.35,3.2c-0.9,0.87-1.99,1.3-3.25,1.3c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26
c0-1.27,0.43-2.35,1.3-3.25c0.87-0.9,1.93-1.35,3.2-1.35c1.27,0,2.35,0.45,3.25,1.35c0.9,0.9,1.35,1.99,1.35,3.25V34.56z" />
<path class="syncron" d="M313.91,25.16c7.74,0,13.94,2.44,18.61,7.3c4.67,4.94,7,11.34,7,19.21c0,7.87-2.34,14.28-7,19.21
c-4.67,4.87-10.87,7.3-18.61,7.3c-7.8,0-14.01-2.43-18.61-7.3c-4.67-4.87-7-11.27-7-19.21c0-7.94,2.33-14.34,7-19.21
C299.9,27.59,306.11,25.16,313.91,25.16z M302.76,65.73c1.57,1.44,3.33,2.49,5.3,3.15c1.97,0.67,3.9,1,5.8,1c1.9,0,3.83-0.33,5.8-1
c1.97-0.67,3.75-1.7,5.35-3.1c3.6-3.27,5.4-8,5.4-14.21c0-6-1.8-10.67-5.4-14.01c-3-2.73-6.7-4.1-11.11-4.1
c-7.2,0-12.21,3.24-15.01,9.71c-1,2.34-1.5,5.15-1.5,8.46c0,3.3,0.5,6.12,1.5,8.46S301.19,64.3,302.76,65.73z" />
<path class="syncron" d="M377.75,33.56c-5.87,0-11.34,3.2-16.41,9.61v30.02c0,1.27-0.45,2.33-1.35,3.2s-1.99,1.3-3.25,1.3
c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26c0-1.33,0.43-2.43,1.3-3.3c0.87-0.87,1.93-1.3,3.2-1.3
c1.27,0,2.35,0.43,3.25,1.3c0.9,0.87,1.35,1.97,1.35,3.3v4.1c2.67-2.8,4.97-4.77,6.9-5.9c3.8-2.2,7.42-3.3,10.86-3.3
s6.25,0.52,8.46,1.55c2.2,1.04,4.07,2.45,5.6,4.25c3.13,3.67,4.7,8.27,4.7,13.81v28.42c0,1.27-0.45,2.33-1.35,3.2
s-1.99,1.3-3.25,1.3c-1.27,0-2.33-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V45.77c0-3.8-0.85-6.79-2.55-8.96
C384.5,34.65,381.68,33.56,377.75,33.56z" />
</g>
<g>
<path class="dot" d="M16.31,62.08h4c1.93,0,3.28,0.37,4.05,1.1c0.77,0.73,1.15,2.07,1.15,4v4.8c0,1.94-0.38,3.29-1.15,4.05
c-0.77,0.77-2.12,1.15-4.05,1.15h-4c-1.94,0-3.29-0.38-4.05-1.15c-0.77-0.77-1.15-2.12-1.15-4.05v-4.8c0-1.93,0.38-3.27,1.15-4
C13.02,62.45,14.37,62.08,16.31,62.08z" />
</g>
</a>
</svg>
答案 1 :(得分：0)
opacity CSS属性只能设置为0和1之间的值。零是完全透明的，一个是完全不透明的。请参见MD docs for opacity。您已在多个位置将其设置为10，这很可能是导致意外行为的原因。
尝试将10的那些实例更改为1：
path.syncron {
stroke: #2d3f50;
fill: #2d3f50;
stroke-dasharray: 266;
opacity: 1;
-moz-animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
-webkit-animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
}
path.dot {
stroke: #e64d3c;
fill: #e64d3c;
stroke-dasharray: 52;
opacity: 1;
-moz-animation: dot 2s cubic-bezier(0,0.23,1,0.1);
-webkit-animation: dot 2s cubic-bezier(0,0.23,1,0.1);
animation: dot 2s cubic-bezier(0,0.23,1,0.1);
}
/*Syncron Logo animation*/
@keyframes syncron {
0% {opacity: 0; fill: none; stroke-dasharray: 266;}
30% {opacity: 0; fill: none; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0);}
100% {opacity: 1; fill: rgba(45,63,80,1); stroke-dasharray: 0;}
}
@-webkit-keyframes syncron {
0% {opacity: 0; fill: none; stroke-dasharray: 266;}
30% {opacity: 0; fill: none; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0);}
100% {opacity: 1; fill: rgba(45,63,80,1); stroke-dasharray: 0;}
}
@-moz-keyframes syncron {
0% {opacity: 0; fill: none; stroke-dasharray: 266;}
30% {opacity: 0; fill: none; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0);}
100% {opacity: 1; fill: rgba(45,63,80,1); stroke-dasharray: 0;}
}
@keyframes dot {
0% {opacity: 0; fill: none; stroke-dasharray: 52;}
30% {opacity: 0; fill: none; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0);}
100% {opacity: 1; fill: rgba(230,77,60,1); stroke-dasharray: 0;}
}
@-webkit-keyframes dot {
0% {opacity: 0; fill: none; stroke-dasharray: 52;}
30% {opacity: 0; fill: none; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0);}
100% {opacity: 1; fill: rgba(230,77,60,1); stroke-dasharray: 0;}
}
@-moz-keyframes dot {
0% {opacity: 0; fill: none; stroke-dasharray: 52;}
30% {opacity: 0; fill: none; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0);}
100% {opacity: 1; fill: rgba(230,77,60,1); stroke-dasharray: 0;}
} <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="409.11px" height="77.54" viewBox="0 0 409.11 105.75">
<style type="text/css">
.syncron{fill:none;stroke:none;stroke-miterlimit:10;}
.dot{fill:none;stroke:none;stroke-miterlimit:10;}
</style>
<title>.syncron Logo | All rights reserved (c) 2019 Syncron</title>
<a class="hide-on-fallback">
<g>
<path class="syncron" d="M52.97,69.78c7.4,0,11.11-2.37,11.11-7.1c0-1.47-0.73-2.58-2.2-3.35c-1.47-0.77-3.32-1.45-5.55-2.05
c-2.24-0.6-4.65-1.22-7.25-1.85c-2.6-0.63-5.02-1.52-7.25-2.65c-2.24-1.13-4.09-2.62-5.55-4.45c-1.47-1.83-2.2-4.08-2.2-6.75
c0-2.67,0.4-4.97,1.2-6.9c0.8-1.93,2-3.6,3.6-5c3.53-3,8.44-4.5,14.71-4.5c5,0,9.84,0.83,14.51,2.5c0.93,0.33,1.65,0.87,2.15,1.6
c0.5,0.73,0.75,1.55,0.75,2.45s-0.38,1.75-1.15,2.55c-0.77,0.8-1.52,1.2-2.25,1.2c-0.73,0-1.64-0.17-2.7-0.5
c-3.2-1-6.7-1.5-10.51-1.5s-6.69,0.67-8.65,2c-1.97,1.34-2.95,2.94-2.95,4.8c0,1.87,0.75,3.25,2.25,4.15
c1.5,0.9,3.35,1.65,5.55,2.25c2.2,0.6,4.62,1.2,7.25,1.8c2.63,0.6,5.05,1.44,7.25,2.5c5.2,2.67,7.8,6.8,7.8,12.41
c0,4.27-1.6,7.74-4.8,10.41c-3.47,2.94-8.31,4.4-14.51,4.4c-6.74,0-12.81-1.5-18.21-4.5c-1.14-0.8-1.7-1.8-1.7-3
c0-1.2,0.37-2.22,1.1-3.05c0.73-0.83,1.53-1.25,2.4-1.25c0.87,0,1.9,0.27,3.1,0.8C44.13,68.92,48.36,69.78,52.97,69.78z"/>
<path class="syncron" d="M126.51,27.01c0.87,0.9,1.3,1.84,1.3,2.8c0,0.97-0.1,1.69-0.3,2.15L100.19,97.6c-0.87,2.07-2.27,3.1-4.2,3.1
c-1.2,0-2.22-0.43-3.05-1.3c-0.83-0.87-1.25-1.74-1.25-2.6c0-0.87,0.1-1.57,0.3-2.1l6.5-16.71L79.68,32.16
c-0.27-0.67-0.4-1.47-0.4-2.4c0-0.93,0.43-1.85,1.3-2.75c0.87-0.9,1.83-1.35,2.9-1.35c2.2,0,3.7,0.93,4.5,2.8l15.41,38.22
l15.71-38.02c0.87-2,2.27-3,4.2-3C124.57,25.66,125.64,26.11,126.51,27.01z"/>
<path class="syncron" d="M163.63,33.56c-5.87,0-11.34,3.2-16.41,9.61v30.02c0,1.27-0.45,2.33-1.35,3.2c-0.9,0.87-1.99,1.3-3.25,1.3
c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26c0-1.33,0.43-2.43,1.3-3.3c0.87-0.87,1.93-1.3,3.2-1.3
c1.27,0,2.35,0.43,3.25,1.3c0.9,0.87,1.35,1.97,1.35,3.3v4.1c2.67-2.8,4.97-4.77,6.9-5.9c3.8-2.2,7.42-3.3,10.86-3.3
c3.43,0,6.25,0.52,8.45,1.55c2.2,1.04,4.07,2.45,5.6,4.25c3.13,3.67,4.7,8.27,4.7,13.81v28.42c0,1.27-0.45,2.33-1.35,3.2
c-0.9,0.87-1.99,1.3-3.25,1.3c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V45.77c0-3.8-0.85-6.79-2.55-8.96
C170.38,34.65,167.56,33.56,163.63,33.56z"/>
<path class="syncron" d="M223.26,69.68c3.74,0,7.3-0.93,10.71-2.8c1.2-0.67,2.27-1,3.2-1c0.93,0,1.77,0.43,2.5,1.3
c0.73,0.87,1.1,1.9,1.1,3.1c0,1.2-0.77,2.3-2.3,3.3c-4.74,3.07-10.07,4.6-16.01,4.6c-7.4,0-13.64-2.33-18.71-7
c-5.34-4.94-8-11.44-8-19.51c0-8.07,2.67-14.57,8-19.51c5.07-4.67,11.31-7,18.71-7c4,0,7.29,0.52,9.86,1.55
c2.57,1.04,4.62,2.05,6.15,3.05c1.53,1,2.3,2.1,2.3,3.3s-0.37,2.24-1.1,3.1c-0.73,0.87-1.47,1.3-2.2,1.3c-1.14,0-2.3-0.33-3.5-1
c-3.4-1.87-6.97-2.8-10.71-2.8c-5.87,0-10.41,1.65-13.61,4.95c-3.2,3.3-4.8,7.65-4.8,13.06c0,5.4,1.6,9.76,4.8,13.06
C212.85,68.03,217.39,69.68,223.26,69.68z"/>
<path class="syncron" d="M261.78,34.56c4.67-6.27,9.91-9.41,15.71-9.41h0.5c1.27,0,2.32,0.43,3.15,1.3c0.83,0.87,1.25,1.95,1.25,3.25
s-0.43,2.34-1.3,3.1c-0.87,0.77-1.97,1.15-3.3,1.15h-0.5c-3.34,0-6.32,0.82-8.96,2.45c-2.64,1.64-4.82,3.75-6.55,6.35v30.42
c0,1.27-0.45,2.33-1.35,3.2c-0.9,0.87-1.99,1.3-3.25,1.3c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26
c0-1.27,0.43-2.35,1.3-3.25c0.87-0.9,1.93-1.35,3.2-1.35c1.27,0,2.35,0.45,3.25,1.35c0.9,0.9,1.35,1.99,1.35,3.25V34.56z"/>
<path class="syncron" d="M313.91,25.16c7.74,0,13.94,2.44,18.61,7.3c4.67,4.94,7,11.34,7,19.21c0,7.87-2.34,14.28-7,19.21
c-4.67,4.87-10.87,7.3-18.61,7.3c-7.8,0-14.01-2.43-18.61-7.3c-4.67-4.87-7-11.27-7-19.21c0-7.94,2.33-14.34,7-19.21
C299.9,27.59,306.11,25.16,313.91,25.16z M302.76,65.73c1.57,1.44,3.33,2.49,5.3,3.15c1.97,0.67,3.9,1,5.8,1c1.9,0,3.83-0.33,5.8-1
c1.97-0.67,3.75-1.7,5.35-3.1c3.6-3.27,5.4-8,5.4-14.21c0-6-1.8-10.67-5.4-14.01c-3-2.73-6.7-4.1-11.11-4.1
c-7.2,0-12.21,3.24-15.01,9.71c-1,2.34-1.5,5.15-1.5,8.46c0,3.3,0.5,6.12,1.5,8.46S301.19,64.3,302.76,65.73z"/>
<path class="syncron" d="M377.75,33.56c-5.87,0-11.34,3.2-16.41,9.61v30.02c0,1.27-0.45,2.33-1.35,3.2s-1.99,1.3-3.25,1.3
c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26c0-1.33,0.43-2.43,1.3-3.3c0.87-0.87,1.93-1.3,3.2-1.3
c1.27,0,2.35,0.43,3.25,1.3c0.9,0.87,1.35,1.97,1.35,3.3v4.1c2.67-2.8,4.97-4.77,6.9-5.9c3.8-2.2,7.42-3.3,10.86-3.3
s6.25,0.52,8.46,1.55c2.2,1.04,4.07,2.45,5.6,4.25c3.13,3.67,4.7,8.27,4.7,13.81v28.42c0,1.27-0.45,2.33-1.35,3.2
s-1.99,1.3-3.25,1.3c-1.27,0-2.33-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V45.77c0-3.8-0.85-6.79-2.55-8.96
C384.5,34.65,381.68,33.56,377.75,33.56z"/>
</g>
<g>
<path class="dot" d="M16.31,62.08h4c1.93,0,3.28,0.37,4.05,1.1c0.77,0.73,1.15,2.07,1.15,4v4.8c0,1.94-0.38,3.29-1.15,4.05
c-0.77,0.77-2.12,1.15-4.05,1.15h-4c-1.94,0-3.29-0.38-4.05-1.15c-0.77-0.77-1.15-2.12-1.15-4.05v-4.8c0-1.93,0.38-3.27,1.15-4
C13.02,62.45,14.37,62.08,16.31,62.08z"/>
</g>
</a>
</svg>