正如标题所说，我正在尝试使用css动画来动画SVG。在chrome中，svg elements平滑地从0不透明度过渡到1，但在firefox中，它只是直接弹出到1不透明度，没有任何延迟或过渡，有时如果我不断刷新页面，那么在10中它可能会工作一次。在下面的代码中，你会看到我已经应用动画在特定的svg元素使用他们的id属性，有人可以指出什么可能是错误的在这里?
.container {
height: 400px;
width: 400px;
}
#circle9114 {
opacity: 0;
animation: appear 1000ms ease-in 250ms forwards;
}
#circle9155 {
opacity: 0;
animation: appear 1000ms ease-in 500ms forwards;
}
#circle9161 {
opacity: 0;
animation: appear 1000ms ease-in 750ms forwards;
}
#circle9161-1 {
opacity: 0;
animation: appear 1000ms ease-in 100ms forwards;
}
@keyframes appear {
to {
opacity: 1;
}
}<div class="container">
<svg viewBox="0 0 217 161" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="g13358">
<path
id="path8997"
d="M95.0557 113.098C101.309 113.098 106.379 108.029 106.379 101.775C106.379 95.522 101.309 90.4526 95.0557 90.4526C88.8023 90.4526 83.733 95.522 83.733 101.775C83.733 108.029 88.8023 113.098 95.0557 113.098Z"
stroke="#1A1A1A"
stroke-width="1.32292"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="path9032"
d="M105.901 101.775H140.795"
stroke="#1A1A1A"
stroke-width="1.10067"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="circle9114"
d="M149.711 109.66C154.276 109.66 157.977 105.959 157.977 101.394C157.977 96.8288 154.276 93.1279 149.711 93.1279C145.146 93.1279 141.445 96.8288 141.445 101.394C141.445 105.959 145.146 109.66 149.711 109.66Z"
stroke="#1A1A1A"
stroke-width="1.32292"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="path9153"
d="M98.779 112.469L193.787 144.58"
stroke="#1A1A1A"
stroke-width="1.32292"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="circle9155"
d="M204.667 160.184C210.921 160.184 215.99 155.114 215.99 148.861C215.99 142.607 210.921 137.538 204.667 137.538C198.414 137.538 193.345 142.607 193.345 148.861C193.345 155.114 198.414 160.184 204.667 160.184Z"
fill="#FFFF00"
stroke="#1A1A1A"
stroke-width="1.32292"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="path9157"
d="M21.8185 134.933L83.9439 103.951"
stroke="#1A1A1A"
stroke-width="1.10068"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="circle9161"
d="M12.3228 153.512C18.5762 153.512 23.6456 148.442 23.6456 142.189C23.6456 135.935 18.5762 130.866 12.3228 130.866C6.06935 130.866 1 135.935 1 142.189C1 148.442 6.06935 153.512 12.3228 153.512Z"
fill="#008000"
stroke="#1A1A1A"
stroke-width="1.32292"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="circle9161-1"
d="M72.7234 23.6456C78.9768 23.6456 84.0461 18.5762 84.0461 12.3228C84.0461 6.06938 78.9768 1 72.7234 1C66.47 1 61.4006 6.06938 61.4006 12.3228C61.4006 18.5762 66.47 23.6456 72.7234 23.6456Z"
fill="#000080"
stroke="#1A1A1A"
stroke-width="1.32292"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="path9163"
d="M75.1572 24.1781L89.0043 92.2054"
stroke="#1A1A1A"
stroke-width="1.10067"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
</svg>
</div>您应该在https://bugzilla.mozilla.org上报告这个错误，以便他们可以修复它。
目前，一个快速的解决方案是同时更新fill-opacity和stroke-opacity而不是opacity:
.container {
height: 400px;
width: 400px;
}
[id^=circle] {
fill-opacity: 0;
stroke-opacity: 0;
}
#circle9114 {
animation: appear 1000ms ease-in 250ms forwards;
}
#circle9155 {
animation: appear 1000ms ease-in 500ms forwards;
}
#circle9161 {
animation: appear 1000ms ease-in 750ms forwards;
}
#circle9161-1 {
animation: appear 1000ms ease-in 100ms forwards;
}
@keyframes appear {
to {
fill-opacity: 1;
stroke-opacity: 1;
}
}<div class="container">
<svg viewBox="0 0 217 161" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="g13358">
<path
id="path8997"
d="M95.0557 113.098C101.309 113.098 106.379 108.029 106.379 101.775C106.379 95.522 101.309 90.4526 95.0557 90.4526C88.8023 90.4526 83.733 95.522 83.733 101.775C83.733 108.029 88.8023 113.098 95.0557 113.098Z"
stroke="#1A1A1A"
stroke-width="1.32292"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="path9032"
d="M105.901 101.775H140.795"
stroke="#1A1A1A"
stroke-width="1.10067"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="circle9114"
d="M149.711 109.66C154.276 109.66 157.977 105.959 157.977 101.394C157.977 96.8288 154.276 93.1279 149.711 93.1279C145.146 93.1279 141.445 96.8288 141.445 101.394C141.445 105.959 145.146 109.66 149.711 109.66Z"
stroke="#1A1A1A"
stroke-width="1.32292"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="path9153"
d="M98.779 112.469L193.787 144.58"
stroke="#1A1A1A"
stroke-width="1.32292"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="circle9155"
d="M204.667 160.184C210.921 160.184 215.99 155.114 215.99 148.861C215.99 142.607 210.921 137.538 204.667 137.538C198.414 137.538 193.345 142.607 193.345 148.861C193.345 155.114 198.414 160.184 204.667 160.184Z"
fill="#FFFF00"
stroke="#1A1A1A"
stroke-width="1.32292"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="path9157"
d="M21.8185 134.933L83.9439 103.951"
stroke="#1A1A1A"
stroke-width="1.10068"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="circle9161"
d="M12.3228 153.512C18.5762 153.512 23.6456 148.442 23.6456 142.189C23.6456 135.935 18.5762 130.866 12.3228 130.866C6.06935 130.866 1 135.935 1 142.189C1 148.442 6.06935 153.512 12.3228 153.512Z"
fill="#008000"
stroke="#1A1A1A"
stroke-width="1.32292"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="circle9161-1"
d="M72.7234 23.6456C78.9768 23.6456 84.0461 18.5762 84.0461 12.3228C84.0461 6.06938 78.9768 1 72.7234 1C66.47 1 61.4006 6.06938 61.4006 12.3228C61.4006 18.5762 66.47 23.6456 72.7234 23.6456Z"
fill="#000080"
stroke="#1A1A1A"
stroke-width="1.32292"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="path9163"
d="M75.1572 24.1781L89.0043 92.2054"
stroke="#1A1A1A"
stroke-width="1.10067"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
</svg>
</div>