Я пытаюсь создать анимацию без использования какого -либо файла 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
