Les animations en CSS, comment ça fonctionne, et comment faire ?

Le CSS est un langage assez compliqué pour les débutants, et pas facile à prendre en main, sans entraînement. Nous allons voir dans ce tutoriel comment faire des animations facilement !

Commençons par le début

Dans un premier temps, nous allons créer notre page HTML, et notre fichier CSS.

Nous avons nos 2 fichiers, comme ceci :

Nous allons créer un petit carré afin de visionner nos animations plus tard :

Nous allons simplement mettre une div en HTML qui aura la classe « carre », et nous verrons le reste en CSS :

Ensuite notre fichier CSS, afin d’avoir un carré :

/* 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;
}

L’animation avec hover

Afin de pouvoir animer le carré, nous allons lui rajouter la propriété transition :

/* 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 pour l'animation : */
    transition: all 1s ease-in-out;
}

Nous mettons en valeur :
all: Pour toutes les transformations qu’il y aura
1s : Le temps de l’animation (0.5s pour une demi seconde)
ease-in-out : spécifie un effet de transition avec un début et une fin lents

Et ensuite, nous allons définir ce qu’il va changer quand ‘hover’ (passage de la souris sur l’élément) sera exécuté :

Mettons un fond bleu pour commencer :

.carre:hover{
    background: blue;
}

Enregistrez tout ça, puis essayer, vous devriez avoir ceci :

On peut aussi le déplacer :

Nous allons d’abord définir une position left dans .carre, pour ensuite la modifier en Hover :

/* 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;
    left: 0;
}

.carre:hover{
    left: 30px;
}

Il est important de définir une première valeur dans la classe de base, pour ensuite la modifier en Hover.

Voici le résultat :

Il existe un nombre infini d’animation à faire, essayer d’en faire une vous même maintenant et n’hésitez pas à nous laisser vos résultats en commentaires, nous serons ravis de voir vos réalisations !

Nous avons vu comment animer des éléments avec :hover, mais nous pouvons automatiser les animations avec les keyframes, mais nous verrons ça dans un prochain tutoriel. N’hésitez pas à laisser des commentaires pour savoir quels tutos vous voudriez voir.

Au prochain tuto ! Bye 😀