Web Animation in Javascript

In questo articolo vediamo un esempio di come usare la Web Animation API in Javascript.

Non sono richieste librerie esterne!

Il tutto avviene grazie al metodo animate, che richiede alcuni parametri.

Qui sotto un esempio di codice:

const my_div = document.getElementById('my_div');
const my_animation = my_div.animate(
    [
        {transform: 'translateX(-10em'},
        {transform: 'translateY(-10em'},
        {opacity: 0.5},
        {transform: 'scale(1.2'},
    ],
    {
        duration: 2000,
        iterations: Infinity,
        direction: 'alternate',
        easing: 'ease-in-out'
    }
);
my_animation.play();

Il div di esempio è banalmente questo:

<div id="my_div" style="width: 300px;height: 300px;background-color: red"></div>

Potete giocare un pò con i parametri per vedere come cambia l'animazione.

Enjoy!