Créez des animations CSS modernes

Tout au long de ce cours, nous avons construit beaucoup de transitions et d'animations. Et, pour chacune d'entre elles, nous sommes revenus plusieurs fois sur le rythme, les accélérations, les transformations de nos animations.

"C'est un peu trop rapide, trop lent, trop X, trop Y"... Maintenant c'est mieux/c'est bien/c'est idéal/c'est la perfection incarnée/ ➡️insérez ici une déclaration positive.

Vous vous êtes sûrement demandé d’où sortaient ces propositions de transitions de X secondes ? Est-ce que ces X secondes ne devraient pas être Y secondes ? Mais est-ce que rendre un nombre de millisecondes soi-disant aléatoire plus rapide/plus lent permet encore d'améliorer l'effet obtenu ?

Vraiment ?

Et la réponse est... peut-être... 🤷‍♀️ ?

Ajustez vos animations par l'itération et les bonnes pratiques

Instant révélation : la « perfection » n'existe pas. Chaque personne a un point de vue différent. Mais si nos préférences peuvent paraître assez variées, elles tendent quand même à être regroupées autour de certaines valeurs. Une personne pense peut-être qu'un menu doit mettre 500 ms pour s'ouvrir, alors que quelqu'un d'autre peut préférer 400 ms. Mais nous aurions probablement du mal à trouver quelqu'un qui pense qu'il faudrait 15 secondes pour que la même animation soit lue.

Alors, comment faire pour que nos animations soient « parfaites » ? Comment pouvons-nous savoir quelle devrait être leur durée idéale ? Et lorsque cette durée ne semble toujours pas « parfaite », savons-nous de combien nous devons la ralentir ou l'accélérer ?

La réponse à ces questions vient en partie de l'expérience et de la pratique. Au fil du temps, l'expérience en tant qu'animateurs, concepteurs ou programmateurs, permet de développer une intuition de ce qui est « parfait ». En animation, tout comme dans tout ce qui est en rapport avec la programmation, c’est en pratiquant que l’on apprend.

Vous vous souvenez quand je vous disais que j’essayais de ne jamais faire une animation de plus de 300 ms dans mes éléments fonctionnels ? Il s’agit en fait de l’un des principes d’UX (user experience, ou expérience utilisateur). Car en termes d’UX, il existe un certain nombre de best practices qui peuvent vous guider dans vos choix.

La pratique pourrait signifier : ajouter plein de valeurs à notre code, actualiser, changer ces nombres, actualiser à nouveau, plisser les yeux en regardant l'écran pour essayer de savoir si ça améliore les choses ou non, puis changer à nouveau les nombres, Ctrl + R/Cmd + R, commencer à devenir nerveuse, changer les nombres pour un tout nouvel ensemble de nombres, actualiser, ça semble mieux... vraiment ?

L'itération est essentielle dans le processus de création d’une animation, mais relancer à chaque fois notre code peut parfois être pénible. Et quand nous sommes sur une app front qui prend quelques secondes à recharger, comme une application React, cela peut rapidement devenir assez frustrant.

Alors, vous pouvez prendre votre mal en patience… ou vous pouvez utiliser les outils d’animation DevTools ! (Vous vous doutez bien que je vous recommande fortement l'option 2.)

Démythifiez les animations

DevTools de Chrome possède un outil intégré que nous pouvons utiliser pour peaufiner et améliorer les transitions et les animations. Cet outil s'appelle judicieusement « Animations ».

Mais avant de pouvoir utiliser le panneau Animations, nous devons l'ouvrir :

Et voilà, nous y sommes. Le panneau Animations. Rien de très excitant pour l'instant, sauf un message nous disant que l'application écoute les animations. Donnons-lui quelque chose à écouter en chargeant une page avec une animation :

Nous avons un menu animé, la boîte principale qui s'ouvre en coulissant, puis les éléments du menu qui glissent en position. Au fur et à mesure que l'animation est lue, une boîte grise s'efface, remplie de quelques lignes colorées.

Étrange... Laissons-nous tenter et cliquons :

Et voilà ! Notre animation de menu se répète, bien que la page n'ait pas été rechargée. Dans le panneau Animations, une timeline d'éléments animés apparaît, avec un logo de lecture lisant les segments pendant que l'animation progresse.

Chaque ligne représente un élément HTML animé avec sa propre couche dans la timeline. Si nous survolons le nom de l'élément ou si nous cliquons sur son graphique d'animation, Chrome le met en surbrillance sur la page :

On dirait donc que nous avons un élément de menu, avec une div pour chaque élément de menu, quelques éléments décoratifs pour améliorer l'animation et des éléments de menu.

Dans chaque couche, des points représentent les étapes clés pour voir où chaque animation commence et se termine, ainsi que les courbes d'accélération, représentées par un graphique de vitesse, où le pic du profil est la vitesse maximale.

L'élément de menu avec la classe  .menu  qui lui est appliquée commence à 0 seconde et dure environ 600 ms, en tout cas à première vue. En fait, si nous cliquons sur la couche, non seulement l'élément est mis en surbrillance, mais ses balises et son style sont également affichés dans le panneau Éléments ci-dessous :

Avec le style de .menu qui nous est présenté, nous pouvons voir qu'il a en effet une durée d'animation de 600 ms, ainsi que la fonction de timing par défaut, et un  animation-fill-mode  réglé sur « both ». Il utilise également un ensemble de keyframes appelé « menu » et possède un keyframe entre le début et la fin, ce qui est indiqué par le point creux au milieu de l'animation.

Les animations attachées aux éléments .menu__open-accent utilisent toujours le même ensemble de keyframes que l'animation du menu principal. On peut le voir grâce au nom “menu” qui est indiqué au-dessus du profil de vitesse. Elles sont les seules à avoir des durées et des délais différents. Si nous cliquons sur l'une d'elles, nous verrons exactement quels sont sa durée et son délai :

Vous pouvez faire des allers-retours avec l'animation en déplaçant le curseur sur la timeline. Cela donne une très bonne idée de la façon dont les différents éléments agissent et interagissent les uns avec les autres :

En cliquant sur le bouton de lecture situé à gauche de la timeline, on peut voir notre animation en temps réel :

Ceci n'est possible que si l'option 100 % est surlignée près du haut du panneau. 100 % indique la vitesse de lecture. Nous pouvons donc également choisir de lire une animation à un quart de sa vitesse normale :

Ou, pour une lecture très ralentie, nous pouvons même la régler pour qu'elle soit lue à 10 % de sa vitesse normale :

En bref, l'outil d'animation peut nous aider pour :

1. Voir rapidement tous les éléments utilisés dans une animation. 

2. Comprendre comment ils sont combinés et mis en scène pour créer le rendu final. 

3. Repérer là où il y a un problème.

4. Et commencer à trouver une solution !

Ainsi, au-delà d'une meilleure compréhension de la composition des animations, comment est-ce que DevTools peut nous aider à améliorer nos animations ?

Regardons à nouveau notre animation de menu :

Ça vous paraît enthousiasmant, n'est-ce pas ? Mais il y a encore quelque chose qui me chiffonne.

Ce n'est pas que cette application soit mauvaise... Mais, quand on regarde la timeline, on voit qu’elle est très linéaire. L'animation se déroule de manière très régulière et graduelle. Chaque élément du menu commence lorsque le précédent est à mi-chemin. Tout semble un peu trop robotique et sans vie :

OK, cette animation n'est pas la meilleure qui soit. J’ai compris ! 🙈 Alors, revenons à l'éditeur et changeons un peu les délais et les durées des éléments du menu, et espérons que les choses aient l'air un peu plus naturelles.

Croisons les doigts. Mais vous n’êtes cependant pas certain d’obtenir le résultat attendu. Pour avoir une animation avec un timing adapté, rien ne remplace l'expérimentation. Et expérimenter en faisant de nombreux allers-retours entre notre éditeur et notre navigateur, c'est un peu comme essayer de courir dans des sables mouvants : une expérience lente, frustrante, avec le risque constant de s'enliser.

Alors, plutôt qu'un destin fait de frustrations et de désespoir, pourquoi ne pas simplement faire glisser son curseur sur les DevTools ? Ça paraît plus tentant, n'est-ce-pas ?

Réglez vos animations directement dans les DevTools

Eh oui, vous pouvez ajuster vos animations très simplement en cliquant et en faisant glisser les éléments de la timeline. Vous voulez faire durer votre animation plus longtemps ou au contraire l’accélérer ? Cliquez sur son point de départ ou sa destination et faites-le glisser vers la gauche ou la droite :

Et d'un seul coup, nous avons modifié la durée de l'animation pour le premier élément de menu. Dans le volet Elements, les valeurs de durée et de délai de l'animation ont été mises à jour.

En cliquant à nouveau sur ce bouton de lecture, nous pouvons voir que notre menu est maintenant lu en utilisant la nouvelle durée.

Nous pouvons donc ajuster nos durées et effectuer quelques petites modifications jusqu'à ce que tout semble parfait. C'est beaucoup plus rapide et plus facile que de faire des allers-retours entre le navigateur et l'éditeur, vous ne trouvez pas ?

En plus de faire glisser les extrémités des animations pour ajuster leur durée, nous pouvons également ajuster leurs délais en faisant glisser (en mode drag-and-drop) le profil de l'animation :

Après avoir déplacé une animation sur la timeline dans un sens ou dans l'autre, sa valeur de délai d'animation est mise à jour dans le volet Elements ci-dessus. Et en cliquant sur le bouton de lecture, vous verrez apparaître notre animation modifiée avec son nouveau délai :

Si on regarde notre code source, rien n'a changé. Cela signifie que si nous actualisons notre page, tout reviendrait à la version précédente de nos animations, et toutes nos modifications seraient perdues !

Quand nous modifions des animations dans le panneau d'animation, nous modifions des éléments dans ce qu'on appelle le DOM (vous vous souvenez, je vous en avais parlé), qui, pour simplifier, est le rendu par le navigateur de nos HTML et CSS, etc. Les modifications que nous avons apportées aux panneaux Animation et Elements n'affectent donc que l'interprétation du rendu de notre code. Si nous voulons conserver la version de notre animation que nous créons dans le panneau Animation, nous devrons mettre à jour manuellement notre code pour le faire correspondre.

C'est vrai. Heureusement, Chrome suit mieux que nous. En haut dans l'onglet de l'élément, aligné à droite du sélecteur qui contient le délai que nous venons de modifier, il y a un lien vers l'emplacement dans le fichier CSS. Cliquons dessus. Devtools passe directement au volet Sources et le met en surbrillance dans le code. Et si nous faisons un clic droit sur le fichier CSS, il est possible de choisir « Local Modifications » (modifications locales) dans le menu contextuel, ce qui ouvre un panneau Modifications à côté de notre panneau Animations :

Dans le panneau « Changes », on peut voir les logs de « diff ». Cela correspond aux différences entre le code source et les modifications effectuées dans les DevTools. Les valeurs originales sont surlignées en rouge, et les valeurs mises à jour sont surlignées en vert.

Nous pouvons rapidement voir les propriétés que nous devons mettre à jour, et les valeurs sur lesquelles nous devons les mettre à jour. Une fois que nous avons ajusté nos animations pour qu’elles correspondent à l’effet recherché, nous pouvons ainsi passer à ce panneau et l'utiliser pour mettre à jour notre code source.

Évaluez vos animations

Maintenant que nous connaissons l’outil Animation sur le bout des doigts, jetons un coup d’œil à notre menu :

Pour l'instant, il y a quelques éléments qui ne vont pas.

1. Les éléments du menu s'affichent trop tard.

2. Les borders de l'élément de menu arrivent également un peu trop tard.

3. Le décalage est trop important entre les différents éléments de menu qui s'animent à l'intérieur. Ils donnent l'impression de s'animer l'un après l'autre, plutôt que d'être décalés.

4. La durée des animations menu__item semble être un peu trop rapide.

Toutes ces remarques viennent vraiment d’une sensibilité. Nous assignons des valeurs en pensant qu'elles seraient de bons points de départ pour les différentes animations, mais elles peuvent et doivent être ajustées en fonction des préférences. Nous n'allons pas entrer dans les détails des durées et des délais de chaque animation.

Différentes choses peuvent vous sembler parfaites ou imparfaites. C’est donc le moment pour vous de faire vos propres expériences. Ouvrez le panneau Animations, cliquez, glissez-déplacez, modifiez et expérimentez à votre guise. Revenez quand vous serez satisfait de votre résultat.

Comparez vos animations

Vous voilà de retour ? Parfait ! J'espère que vous avez une animation qui vous plaît. De mon côté, voici la version que je préfère !

Dans l'ensemble, l'animation principale .menu est un peu plus lente, de même que les animations de .menu__item, qui sont maintenant échelonnées de manière plus rapprochée.

Modifier son animation est un véritable processus. Arriver à une animation que l'on trouve « parfaite » n'est pas quelque chose que l'on parvient à faire du premier coup. Grâce à notre expérience et à notre instinct, nous pouvons commencer à nous faire une idée de ce que les valeurs de l'animation devraient probablement être, mais ce n'est que le point de départ. À partir de là, il s'agit de tester et de tâtonner pour arriver à un résultat dont nous sommes satisfaits.

Les durées ont été un peu modifiées, mais les changements les plus importants concernent la durée des  animation-delay. Tous les éléments de .menu__item arrivent plus tôt, avec .menu__item--1 à peine 25 millisecondes plus tôt, et .menu__item--3 presque 400 ms plus tôt.

Dans l'ensemble, cela permet d’avoir une animation plus dynamique et plus accrocheuse. Voici ces changements, intégrés dans le code final :

<div class="container">
    <menu class="menu">
        <div class="menu__item menu__item--1 menu__item--current">
            Home
            <div class="menu__item-accent menu__item-accent--active"></div>
        </div>
        <div class="menu__item menu__item--2">
            About
            <div class="menu__item-accent"></div>
        </div>
        <div class="menu__item menu__item--3">
            Contact
            <div class="menu__item-accent"></div>
        </div>
        <div class="menu__open-accent--1"></div>
        <div class="menu__open-accent--2"></div>
    </menu>
</div>

$cd-navy: #0E397F;
$cd-mint: #15dea5;

@mixin menu__open-accent($dur, $delay) {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #f4f9f8;
    transform-origin: top left;
    animation: menu $dur $delay both;
    z-index: -1;
}

.menu {
    min-width: 33vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    background:$cd-mint;
    overflow: hidden;
    transform-origin: top left;
    position: relative;
    animation: menu 661ms both;
    z-index: -10;
    &__open-accent--1{
        @include menu__open-accent(450ms, 275ms);
    }
    &__open-accent--2 {
            @include menu__open-accent(450ms, 150ms);
            background: $cd-navy;
            z-index: -2;
    }
    &__item {
        padding: .75rem;
        margin: .25rem;
        background: #fff;
        animation: menu__item 810ms cubic-bezier(.1,.9,.1,1) both;
        position: relative;
        &-accent {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: .25rem;
            background-color: $cd-mint;
            animation: menu__accent 400ms both;
            &--active {
                background-color: $cd-navy
            }
        }
        &--1 {
            animation-delay: 475ms;
            > div {
                animation-delay: 712ms;
            }
        }
        &--2 {
            animation-delay: 546ms;
            > div {
                animation-delay: 805ms;
            }
        }
        &--3 {
            animation-delay: 632ms;
            > div {
                animation-delay: 914ms;
            }
        }
    }
}

@keyframes menu {
    0% {
        transform: scale(0,.07);
    }
    33% {
        transform: scale(1,.07);
        animation-timing-function: cubic-bezier(.73,.01,.2,.99)
    }

}

@keyframes menu__item {
    0% {
        transform: translateX(-110%);
    }
}

@keyframes menu__accent {
    0% {
        transform: scaleY(0);
    }
}

Votre code peut vous sembler très similaire, ou il peut y avoir d'énormes différences. Quoi qu'il en soit, vous avez créé une animation qui vous convient à vous, et c’est très important. Maintenant une étape essentielle : s’assurer que votre animation convient également aux autres. Le meilleur moyen de savoir si c'est le cas est de demander des feedbacks autour de vous. 

La création d'une animation ne consiste pas seulement à cocher des cases sur une liste d'éléments à livrer. Elle vient également étayer et améliorer notre compréhension de ce qui esthétique ou non. Chaque keyframe, chaque ajustement, chaque erreur nous permet d'être plus performants à l'avenir. Chaque animation que nous créons nous permet d'améliorer notre art.

Félicitations, vous êtes maintenant de véritables animateurs dans l’âme. Vous donnez vie aux pages web 👩‍🎨 !

En résumé

• Itérer, c’est le secret d'une bonne animation. Le simple fait d'ajouter quelques chiffres et d'appuyer sur Enregistrer est rarement suffisant ;

• Notre expérience nous donne une bonne intuition quant aux valeurs de départ qui paraissent bien pour nos propriétés d'animation ;

• Le panneau Animations de DevTools nous permet d'affiner rapidement les animations, d'improviser et d'expérimenter jusqu'à ce que nous trouvions la bonne durée ou le bon délai pour un élément ;

• Le panneau Changes (Modifications) nous permet de voir les propriétés que nous avons modifiées ainsi que leurs nouvelles valeurs, de façon à mettre à jour notre code source en conséquence. 

Dans le prochain chapitre, nous ferons un petit tour d’horizon de vos nouvelles compétences 🚀