• 6 heures
  • Moyenne

Les animations CSS

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Les animations CSS sont en quelque sorte des "super-transitions". Là où la transition se contentait de transformer progressivement un objet d'un état A à un état B, l'animation permet de passer par autant d'états que vous voulez (A, B, C, D :-° ).

Imaginez que vous souhaitiez déplacer un objet, puis le retourner, puis le déplacer à nouveau tout en changeant sa couleur et en arrondissant ses angles. Hmm, comment feriez-vous ça ? Avec les animations, c'est possible !

Un objet animé en CSS3 : il passe par plusieurs étapes différentes !
Un objet animé en CSS3 : il passe par plusieurs étapes différentes !

Essayez !

Les animations sont aujourd'hui globalement bien supportées par tous les navigateurs du marché, de quoi libérer votre imagination ! :D

Nous allons d'abord voir comment créer une animation de base en définissant ce qu'on appelle des keyframes. Puis, nous découvrirons quelques propriétés qui nous permettront de configurer ces animations avec plus de précision !

Les bases de l'animation CSS

Les animations CSS ressemblent un peu aux transitions, mais attention quand même parce qu'il y a plusieurs différences subtiles.

Pour faire une animation en CSS, vous devez :

  1. Définir les étapes de l'animation à l'aide d'une directive CSS@keyframes qui est un peu particulière. D'une certaine façon, ça va vous rappeler@font-face, mais en un peu plus compliqué. ;) 

  2. Appliquer la propriétéanimation sur l'élément que vous voulez animer (lors d'un:hover par exemple au survol). Ça c'est assez simple en revanche.

Définir les étapes de l'animation

La définition des étapes de l'animation se fait dans un coin à part dans le fichier CSS, comme@font-face. Vous pouvez le faire tout au début du fichier CSS par exemple.

Voici une première animation que j'ai nommée "masuperanimation" :

@keyframes masuperanimation {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(150px);
    }

    100% {
        transform: translateX(150px) rotate(30deg);
    }
}

Décortiquons ce code :

  • Au début, on a la directive@keyframes qui permet de dire "je vais définir une animation". On doit lui donner un nom pour s'en resservir ensuite. Ici, il s'agit de "masuperanimation".

  • Ensuite, on définit les étapes de l'animation. A 0% (au début), l'objet n'aura pas bougé (puisque j'ai appliqué une translation de 0px). A 50% (la moitié), il aura bougé de 150px. Puis, à 100% (à la fin), il aura bougé de 150px ET tourné de 30 degrés.

Vous pouvez définir autant d'étapes que vous voulez. Vous pouvez définir une étape à 10%, à 87%, etc. Et vous pouvez animer aussi les couleurs, les bordures, etc. N'hésitez pas à essayer !

Appliquer l'animation à un objet

Appliquer l'animation est en fait très simple. Maintenant qu'on a créé une animation nommée "masuperanimation", il suffit d'utiliser la propriétéanimation sur notre objet (ici au survol) :

@keyframes masuperanimation {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(150px);
    }

    100% {
        transform: translateX(150px) rotate(30deg);
    }
}

div
{
    margin: 100px;
    width: 200px;
    height: 150px;
    background-color: #008;
}

div:hover
{
    animation: masuperanimation 2s; /* On utilise "ma super animation" définie plus tôt */
}

On indique ici qu'on utilise l'animation "masuperanimation" sur une durée de 2s. Voyons ce que ça donne, on devrait avoir une translation puis une rotation :

Une animation en deux étapes
Une animation en deux étapes

Pour que ça fonctionne sur tous les navigateurs

Comme je vous le disais plus tôt, les navigateurs Safari, Opera et Chrome ne gèrent pas encore la propriété sans préfixe -webkit (voir sur caniuse.com). Il va falloir donc doubler le code pour que ça fonctionne partout.

Voici donc le code complet qu'il faut utiliser pour que ça fonctionne en toutes circonstances :

@-webkit-keyframes masuperanimation { /* Safari, Opera, Chrome */
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(150px);
    }

    100% {
        transform: translateX(150px) rotate(30deg);
    }
}

@keyframes masuperanimation { /* Tous les autres navigateurs */
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(150px);
    }

    100% {
        transform: translateX(150px) rotate(30deg);
    }
}

div
{
    margin: 100px;
    width: 200px;
    height: 150px;
    background-color: #008;
}

div:hover
{
    -webkit-animation: masuperanimation 2s; /* Safari, Opera, Chrome */
    animation: masuperanimation 2s; /* Tous les autres navigateurs */
}

Oui c'est long. :(
Heureusement dans quelques temps cela ne devrait plus être nécessaire.

L'ensemble des propriétés CSS des animations

Il existe de nombreuses propriétés CSS liées aux animations. Jusqu'ici, nous avons utiliséanimation, qui est en fait la super-propriété qui les combine toutes. Mais je pense qu'il serait bien de connaître leur noms, ne serait-ce que pour savoir tout ce qu'il est possible de faire :

  • animation-name  : le nom de l’animation à utiliser.

  • animation-duration  : la durée de l’animation. Ex : 2s, 350ms...

  • animation-delay : délai avant le démarrage de l'animation. Ex : 2s, 350ms... Notez que ce délai peut être négatif pour qu'on ait l'impression que l'animation a déjà démarré depuis un certain temps.

  • animation-timing-function : l'accélération de l'animation. Nous avons vu dans le chapitre précédent que nous pouvions contrôler la vitesse de l'animation à différentes étapes grâce à ça. Ex : ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier()... On verra plus tard qu'on peut aussi y ajouter steps().

  • animation-iteration-count : nombre de répétitions de l’animation. Avec "infinite", l'animation sera jouée en continu. Par défaut, la valeur est 1 (l'animation n'est jouée qu'une fois).

  • animation-direction : permet de faire revenir l'animation en sens inverse avec la valeur "alternate", ou juste une fois à l'envers avec "reverse". Par défaut avec "normal", une fois l'animation arrivée au bout, l'objet revient d'un coup à sa position initiale (ce qui peut être un peu surprenant).

  • animation-fill-mode  : permet d'indiquer à l'ordinateur comment l'objet doit s'afficher avant et après l'animation. Doit-il revenir à la position initiale ? A la position finale ? Les valeurs possibles sont notamment "none" (par défaut), "forwards" (pour que l'élément reste à sa position finale) et "backwards" (pour que l'élément revienne à sa position initiale).

Je ne vais pas présenter toutes ces propriétés car vous les connaissez déjà pour certaines depuis le chapitre précédent sur les transitions. Je vais m'attarder surtout sur les nouveautés.

Une animation par étapes avec les steps()

La propriétéanimation-timing-function fonctionne commetransition-timing-function. Elle permet de définir l'accéléréation de l'animation. Essayez ses différentes valeurs pour observer la différence : ease, linear, ease-in, ease-out, ease-in-out et cubic-bezier(val1, val2, val3, val4).

La nouveauté, c'est qu'il est aussi possible d'utiliser les valeurs suivantes que vous ne connaissez pas encore :

  • step-start : l'objet prend son état final dès que l'animation commence. En clair, on "saute" directement à l'étape 100%.

  • step-end : l'objet prend son état final à la fin du délai de l'animation. L'objet ne bouge pas pendant la durée prévue de l'animation et, d'un coup, à la fin, il arrive dans son état final. Un délai a lieu donc avant que l'objet arrive à son état final.

  • steps(X) : l'objet fait X paliers à chaque étape. L'animation peut donner l'impression qu'elle est saccadée.

Je crois que le plus intéressant est de tester steps(), donc voyons ce que ça donne :

div:hover
{
    animation: movemydiv 2s steps(3); /* 3 étapes */
}

Code complet :

@keyframes movemydiv {
    from {
        transform: translateX(0px);
    }

    30% {
        transform: translateX(150px);
    }

    60% {
        transform: translateX(150px) rotate(30deg);
    }

    80% {
        transform: translate(100px, 80px) rotate(30deg);
    }

    to {
        transform: translate(100px, 80px) rotate(30deg);
        border-radius: 30px;
        background-color: red;
    }
}

div
{
    margin: 100px;
    width: 200px;
    height: 150px;
    background-color: #008;
}

div:hover
{
    animation: movemydiv 2s steps(3); /* 3 étapes */
}

Il y aura ici 3 images par étape. Ce qui nous donne l'animation suivante :

Une animation par paliers avec steps()
Une animation par paliers avec steps()

Essayez !

Jouer l'animation en continu

Pour jouer l'animation en continu, on va avoir besoin de :

  • Définiranimation-iteration-count à "infinite", pour que l'animation se joue à l'infini

  • Mais aussi définiranimation-direction à "alternate", pour faire en sorte que l'animation revienne sagement à sa position initiale sans "saut".

div:hover
{
    animation: movemydiv 2s linear alternate infinite; /* Boucle d'animation ! */
}

Code complet :

@keyframes movemydiv {
    from {
        transform: translateX(0px);
    }

    30% {
        transform: translateX(150px);
    }

    60% {
        transform: translateX(150px) rotate(30deg);
    }

    80% {
        transform: translate(100px, 80px) rotate(30deg);
    }

    to {
        transform: translate(100px, 80px) rotate(30deg);
        border-radius: 30px;
        background-color: red;
    }
}

div
{
    margin: 100px;
    width: 200px;
    height: 150px;
    background-color: #008;
}

div:hover
{
    animation: movemydiv 2s linear alternate infinite; /* Boucle d'animation ! */
}

Et voilà une animation qui va pouvoir tourner proprement à l'infini !

L'animation boucle à l'infini
L'animation boucle à l'infini !

Essayer !

Voilà vous en savez assez pour vous amuser !

Evidemment, le plus gros du travail d'animation se fait lors de la définition des@keyframes. Vous pouvez modifier beaucoup de paramètres, donc laissez aller votre imagination ! ^^

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
Exemple de certificat de réussite
Exemple de certificat de réussite