Аніміруємо в JS

Рядок в HTML (блок з картинкою)

<div id="img"><img src="kozak.png" width="150px" height="180px"></div>

Створюємо анімацію (файл  ___.js)

var imgMove = anime ({

targets: '#img',

translateX: 250

});

Метод anime вказує бібліотеці anime.js про те, що буде відбуватися анімація деякого елементу.

Параметр targets дозволяє вибрати потрібний елемент, який буде анімуватися.

Параметр translateX дозволяє пересунути елемент по вісі Х на n пікселей.

Дія анімації: при старті сторінки елемент (козак) плавно з’явиться з 0 точки до 250.

Якщо додати css властивість

#img {

margin-left: 250px

}

а в параметрі translateX: -250

то елемент з 250 позиції перейди в 0.

Щоб анімація не запускалася відразу, додаємо кнопку:

<button class="btn">Play</button>

а js додаємо параметр

autoplay: false

та виклик функції по натисканню на кнопку

document.querySelector ('.btn').onclick = imgMove.restart;

Якщо хочемо анімацію зациклити, тоді це параметр

loop: true

Наступні параметри дозволять анімації програватися повільно і закінчитися через деякий час

easing: 'linear',

duration: 2000,

Щоб анімація програвалася і в зворотньому напрямку, тоді це параметр

direction: 'alternate',

Наступні параметри дозволять елемент переміщувати і по вісі Y, а також при цьому ще й зменшувати його

translateY: 150,

scale: 0.6