Я знаю, что этот вопрос задавался много лет назад, но я наткнулся на него, и нет никакого реального ответа, кроме «Firefox сосет». Хитрость в том, чтобы включить аппаратное ускорение для анимации элементов dom в Firefox, заключается в добавлении небольшого поворота вместе с вашим переводом. Например:
@keyframes square-animation {
0%, 100% {
transform: translate(600px, 160px) rotate(0.01deg);
}
50% {
transform: translate(355px, 160px) rotate(0.01deg);
}
}
Причина, по которой он нестабилен, состоит в том, чтобы избежать размытия чего-либо внутри анимации div (особенно текста). Хотя я лично не думаю, что это правильный выбор для поведения по умолчанию, вы можете увидеть причину здесь .