Почему эта анимация с использованием anime.js более плавная, чем обычный переход CSS с помощью styled-компонентов?

Question

Я следовал двум упущениям, чтобы оживить компонент Карусели, который я строю. Я использую React с крючками React.

ВАРИАНТ № 1: с anime.js

• Я меняю состояние selected , и ловушка useEffect() вызывает анимацию animateScroll() для моего компонента.
• Анимация выполняется с anime.js согласно приведенному ниже коду.
• Что происходит: некоторые Javascript работают на фоне и обновляют встроенный стиль style="transform: translateX(-200%);" в соответствии с выбранным свойством замедления.

function animateScroll() {
    anime({
      targets: sliderRef.current,
      translateX: selected * -100 + '%',
      easing: 'cubicBezier(0.19, 1, 0.22, 1)',
      duration: 1000
    });
  }

ОПЦИЯ № 2: обычные CSS-переходы со стилизованными компонентами

• Я изменяю selected состояние , и это меняет position опору моего стилевого компонента S.Slider_DIV, который должен скользить с translateX.
• Стилизованный компонент затем обновляет свойство translateX и обновляет класс CSS моего S.Slider_DIV компонента новым значением для свойства translateX.

<S.Slider_DIV ref={sliderRef} position={selected}>
  {imageItems}
</S.Slider_DIV>

S.Slider_DIV = styled.div`
  transform: ${props => 'translateX( '+ props.position * -100 +'%)'};
  transition: transform 1.0s cubic-bezier(0.19, 1, 0.22, 1);
`;

ВЫПУСК

• Обратите внимание, что обе функции замедления одинаковы.
• В браузере для настольного компьютера я не могу понять разницу между этими двумя подходами.
• Но на моем телефоне (Galaxy A5 2017) вариант № 1 с anime.js намного плавнее.
• Вариант # 2 немного "заикается", особенно во время фазы перехода, где приращения меньше, как, например, в последней части 'easeOutExpo'.

ВОПРОС

Почему это? В этом простом примере перехода не должен ли обычный переход CSS в браузере быть по меньшей мере таким же плавным и эффективным, как при переходе JS с обновлением встроенного стиля?

Я попытаюсь сделать пример на CodeSandBox, чтобы воспроизвести разницу между ними.

РЕДАКТИРОВАТЬ: Вот CodeSanbox: https://codesandbox.io/s/tx464

Откройте на своем мобильном телефоне, и, возможно, вы увидите разницу. Нажмите несколько раз на разных частотах кликов.

Вы увидите, что animeJS полностью плавный, а обычный с Styled-компонентами и CSS-переходами заикается и меняет скорость.

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

GIF ниже был сделан на рабочем столе. Вы можете видеть изменение скорости, но не видите эффекта заикания. Также оба выглядят ужасно, потому что частота дискретизации GIF слишком низкая. Но проверьте сами, и вы увидите, что animeJS полностью плавный, и вы столкнетесь с проблемами на другом.

Обе анимации имеют одинаковую длительность и одинаковое время cubicBezier.