Я упростил анимацию SVG, над которой я работаю (которая должна выглядеть как заполнение контейнера), до примера ниже, который работает плавно в Chrome, но прерывисто / заикается в Firefox. Это SVG с тремя слоями:
Первый слой - это <mask>
для последнего слоя, который представляет собой красный кружок. Средний слой SVG - это серый круг. Таким образом, красный кружок находится поверх серого круга и становится видимым благодаря маске, которая анимируется с помощью CSS:
#color-mask {
fill: white;
}
#color-mask path {
animation: waves .75s infinite linear;
}
@keyframes waves {
from {
transform: translateX(17rem);
}
to {
transform: translateX(-17rem);
}
}
#color-mask g {
animation: raise 6s infinite ease-in-out;
animation-direction: alternate;
}
@keyframes raise {
from {
transform: translateY(11rem);
}
to {
transform: translateY(-18rem);
}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 400">
<mask id="color-mask">
<g>
<path d="m 909.1,353.4 0,-67.6 c -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71.1,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 l 0,632.2 1419,0 z"/>
</g>
</mask>
<g id="grey">
<circle id="top_grey" style="fill: rgb(180, 180, 180);" cx="200" cy="200" r="200"></circle>
</g>
<g id="color" mask="url(#color-mask)">
<circle id="top_color" style="fill: rgb(196, 3, 3);" cx="200" cy="200" r="200"></circle>
</g>
</svg>
CSS-анимация translates (смещает) как по горизонтали, так и по вертикали, но с разной скоростью.
Я также пробовал использовать <clipPath>
вместо <mask>
и получил те же результаты, такие же прерывистые аннимации в Firefox в Windows и Linux.
Одна очень странная особенность, которую я заметил в Firefox, заключается в том, что если у меня открыты инструменты разработчика, анимация иногда будет работать плавно. Инструменты разработчика Firefox тоже, похоже, не указывают на какие-либо проблемы, но я не эксперт в SVG-анимации. Почему Firefox подавляется этим, а Chrome - нет?
Свободный перевод вопроса Why is this SVG mask animation choppy in Firefox but smooth in Chrome? от участника @j08691.