JS-анимация с методом Element.animate выдает ошибку о диапазоне смещения ⇐ Javascript

[Anonymous]

Я пытаюсь создать анимацию без использования какого -либо файла CSS. Для этого я использую приложение React и метод. Animate для управления ключевыми кадром. Анимация - это покачивание.Failed to execute 'animate' on 'Element': timeline offset must be a range offset pair. Missing the offset. TypeError: timeline offset must be a range offset pair. Missing the offset.
const animateWiggle = () => {
let top = document.getElementById("top")

top.animate([
{
offset: [0.1, 0.9],
transform: "translate(-50%) translate3d(-1px, 0, 0)",
},
{
transform: "translate(-50%) translate3d(2px, 0, 0)",
offset: [0.2, 0.8]
},
{
transform: "translate(-50%) translate3d(-4px, 0, 0)",
offset: [0.3, 0.5, 0.7]
},
{
transform: "translate(-50%) translate3d(4px, 0, 0)",
offset: [0.4, 0.6]
}
], {
duration: 1000,
iterations: Infinity,
}
)
}

useEffect(() => {
animateWiggle()
}, [])

// ...

return (
[img]{topImage}
/>
)
< /code>
Обратите внимание, что это работает с чистыми CSS, но все мое намерение здесь состоит в том, чтобы преобразовать анимации CSS в чистый JavaScript, чтобы изменить его свойства в приложении. < /p>
Оригинальная анимация CSS: < /p>
@keyframes wiggle {
10%,
90% {
transform: translate(-50%) translate3d(-1px, 0, 0);
}

20%,
80% {
transform: translate(-50%) translate3d(2px, 0, 0);
}

30%,
50%,
70% {
transform: translate(-50%) translate3d(-4px, 0, 0);
}

40%,
60% {
transform: translate(-50%) translate3d(4px, 0, 0);
}
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... fset-range