Les animations en CSS #2

Les animations en CSS avec Keyframes

Ce tutoriel est la suite du tutoriel sur les animations en CS #1 : https://blog.yourstories.fr/css/les-animations-en-css-1/

Reprenons notre page de base, comme suit :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animations CSS3</title>
    <!-- inclusion du fichier css -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="carre"></div>
</body>
</html>

Nous avons notre div, avec sa classe “carre”, nous allons utiliser celle-ci pour l’nimation.

Côté CSS, nous allons créer notre Keyframes tout d’abord :

@keyframes moveCarre{ /* Declaration du Keyframes en lui attribuant un nom 'moveCarre' */
    /* ici, nous allons juste definir quoi faire, et quand */
    /* On mettra un background blue quand l'animation arrivera a 25% de son temps defini dans 'duration' de la propriete 'animation' */
    
    25%{
        background: blue;
    }
    50%{
        background: green;
    }
    75%{
        background: yellow;
        margin-left: 10px;
    }
    100%{
        background: grey;
    }
}

/* appelle d'une "class" html avec le "."*/
.carre{
    /* definition de la position */
    position: absolute;
    /* definition de hauteur largeure, afin d'avoir un carre */
    width: 250px;
    height: 250px;
    /* La couleur de fond : */
    background: red;
    /* transition: all 1s ease-in-out; // Plus besoin de transition ici, met dune propriete animation  */
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    animation: moveCarre 3s ease-in-out 0s infinite;
    left: 0;
}

Nous avons plusieurs manière d’écrire un Keyframes, nous pouvons aussi utilisé ‘from’ et ‘to’ :

@keyframes moveCarre{ /* Declaration du Keyframes en lui attribuant un nom 'moveCarre' */
    /* ici, nous allons juste definir quoi faire, et quand */
    /* On mettra un background blue quand l'animation arrivera a 25% de son temps defini dans 'duration' de la propriete 'animation' */
    
    from{ /* Part de background grey */
        background: grey;
    } 
    to{ /* Pour finir sur background black */
        background: black;
    }
}

/* appelle d'une "class" html avec le "."*/
.carre{
    /* definition de la position */
    position: absolute;
    /* definition de hauteur largeure, afin d'avoir un carre */
    width: 250px;
    height: 250px;
    /* La couleur de fond : */
    background: red;
    /* transition: all 1s ease-in-out; // Plus besoin de transition ici, met dune propriete animation  */
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    animation: moveCarre 3s ease-in-out 0s infinite;
    left: 0;
}

Avec les from to, nous pouvons aussi se permettre de rajouter un 50%, afin d’être plus précis sur notre animation :

@keyframes moveCarre{ /* Declaration du Keyframes en lui attribuant un nom 'moveCarre' */
    /* ici, nous allons juste definir quoi faire, et quand */
    /* On mettra un background blue quand l'animation arrivera a 25% de son temps defini dans 'duration' de la propriete 'animation' */
    from{ /* Part de background grey */
        background: grey;
    } 
    50%{
        background: blue;
    }
    to{ /* Pour finir sur background black */
        background: black;
    }
}

/* appelle d'une "class" html avec le "."*/
.carre{
    /* definition de la position */
    position: absolute;
    /* definition de hauteur largeure, afin d'avoir un carre */
    width: 250px;
    height: 250px;
    /* La couleur de fond : */
    background: red;
    /* transition: all 1s ease-in-out; // Plus besoin de transition ici, met dune propriete animation  */
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    animation: moveCarre 3s ease-in-out 0s infinite;
    left: 0;
}

Maintenant, à vous de jouer, tentez de reproduire cette animation :

Au prochain tuto !

Bye 😀

By root

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.