React-Spring и Framer-Motion тормозят в Firefox ⇐ CSS

[Anonymous]

У меня проблема с двумя библиотеками анимации (react-spring,framer-motion). Я пытался сделать простую анимацию в тот момент, когда компонент виден впервые. (это упрощенная версия)

Код: Выделить всё

NAME

Проект Github

Он выглядит очень гладко в Chrome, Brave, Edge, но в Firefox в конце анимации это выглядит запаздывающим.
Этот пример основан на Framer-Motion, но в React-Spring он выглядит так же. Когда продолжительность перехода короче, а TranslateX длиннее, это выглядит лучше, но все равно это не плавная анимация (и изменение свойств не является решением этой проблемы, что работает в других браузерах).
Firefox(76.0.1)(OS Win10) .

Я пытался сделать одну и ту же анимацию, используя чистый CSS, и она выглядела гладко в каждом браузере. Я искал решения своей проблемы, но не нашел конкретных ответов.

Подробнее здесь: https://stackoverflow.com/questions/621 ... on-firefox