Я пытаюсь написать функцию, которая перемещает мое изображение лица с одной стороны контейнера на другую в цикле одним нажатием кнопки.Мне нужна функция в JavaScript, которая автоматически перемещает / анимирует объект (изображение) для горизонтального перемещения в моем контейнере.Каждый раз, когда я нажимаю кнопку «Пуск» или даже обновляю страницу, я не могу даже переместить свое изображение.Я застрял, и помощь будет высоко ценится.Мой код ниже, так что я могу получить обратную связь.Мой Javascript, HTML и CSS находятся в отдельном файле.
var start = anime({
targets: 'img.face',
translateX: [{
value: 100,
duration: 1200
},
{
value: 0,
duration: 800
}
],
rotate: '1turn',
duration: 2000,
loop: true
});
document.querySelector('button').onclick = start.play();
<!-- language: lang-css -->
body {
text-align: center;
}
button {
color: red;
background: lightblue;
font-family: Impact, 'Arial Narrow Bold', sans-serif;
}
.face {
position: relative;
width: 50px;
height: 50px;
}
#container {
position: absolute;
width: 1000px;
height: 500px;
background: aqua;
border: 20px lightpink solid;
margin: 20px 150px 20px 150px;
}
<!-- language: lang-html -->
<div>
<button id="start">Start</button>
</div>
<div id="container">
<img class="face" src="https://previews.123rf.com/images/jemastock/jemastock1705/jemastock170504269/77700505-color-pencil-cartoon-front-view-face-guy-with-hairstyle-vector-illustration.jpg" alt="">
</div>
<!-- end snippet -->