Aggiungere animazioni CSS con Animate.css

Mattepuffo's logo
Aggiungere animazioni CSS con Animate.css

Aggiungere animazioni CSS con Animate.css

Programmazione, HTML - CSS

Animate.css è una semplice libreria CSS che ci consente di aggiungere animazioni ai componenti semplicemente aggiungendo la classe apposita.

E' molto facile da installare e da utilizzare.

Io ho usato il metodo più classico includendolo nell'head della pagina.

Ecco un paio di esempi:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title>TEST</title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    </head>

    <body>
        <h1 class="animate__animated animate__bounce">BOUNCE</h1>
        <p class="animate__animated animate__backInDown">BACK IN DOWN</p>
        <div class="animate__animated animate__jello animate__delay-2s">Example</div>
    </body>
</html>

Come vedete dobbiamo sempre includere la classe animate__animated, quella principale.

Poi dobbiamo settare la classe per l'animazione animate__*.

Volendo potete impostare anche un ritardo nell'animazione.

Enjoy!

Condividi

Commentami!