Почему кубическая анимация Bezier отличается в CSS против JavaScript? ⇐ Javascript

[Anonymous]

Я обнаружил любопытную проблему при перемещении анимации с кубическим берье от CSS в JavaScript: время было другим. См. Пример ниже:
( протестирован как в Chrome, так и в Safari < /em>) < /p>
Это не проблема времени загрузки; Анимации синхронизированы, но выглядят по -разному. CSS One-более мягкий, в то время как JS One острый, как быстрый удар. PrettyPrint-Override ">

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

document.querySelector('.js-animation').animate([
{ offset: 0.00, transform: 'translateX(0px)', },
{ offset: 0.25, transform: 'translateX(-20px)', },
{ offset: 0.50, transform: 'translateX(40px)', },
{ offset: 0.75, transform: 'translateX(-20px)', },
{ offset: 1.00, transform: 'translateX(0px)', },
],{
duration: 1000, easing: 'cubic-bezier(.36,.07,.19,.97)', iterations: Infinity,
});< /code>
/* just for style */
body { display: flex; flex-direction: column; gap: 20px; padding: 0 40px; }
.box { display: grid; place-items: center; width: 100px; height: 40px; background-color: black; color: white; font: bold 1.5rem sans-serif; }

.css-animation {
animation: shake 1000ms cubic-bezier(.36,.07,.19,.97) infinite;
}
@keyframes shake {
0%   { transform: translateX(0px); }
25%  { transform: translateX(-20px); }
50%  { transform: translateX(40px); }
75%  { transform: translateX(-20px); }
100% { transform: translateX(0px); }
}< /code>
CSS

JS

анимация должна быть одинаковой, так что объясняет это различие?

Подробнее здесь: https://stackoverflow.com/questions/796 ... javascript