• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 07/02/2024

Créez des transitions CSS à propriétés multiples

Montez en puissance

Très bien, nous avons appris les bonnes techniques pour renforcer et améliorer nos animations. Mais il semble compliqué d’appliquer certains de ces principes directement dans vos transitions.

Certes, nous pouvons faire grandir ou rétrécir des objets… mais comment atteindre l’objectif qui est de donner vie à nos pages ?

Dans l’animation, la complexité est essentielle pour rendre nos animations plus vivantes et convaincantes. Il ne s’agit pas simplement de passer d’un état A à un état B. Mais davantage de faire une superposition d’effets de mouvement, afin d’obtenir une animation qui paraît bien plus authentique aux yeux de l’utilisateur.

OK, c'est super de savoir tout cela. Mais COMMENT atteindre cet objectif ? 🤔

Pour l’instant, nous nous sommes contentés des propriétés les plus simples pour créer nos transitions. Mais il existe davantage de propriétés dont nous pouvons nous servir pour créer cet effet de complexité.

Créez des animations naturelles en combinant les transitions

Comme vous avez pu le voir dans les 12 principes de l’animation, certains principes nécessitent d’animer plusieurs propriétés, comme “Secondary Action”. Impossible de passer à côté, c’est même dans le titre ! Mais pas de souci à se faire : au sein d’une transition, vous pouvez facilement animer deux propriétés, ou même trois, ou même autant que vous souhaitez.

Même si c’était il y a plusieurs chapitres, j’espère que vous vous souvenez que nous avions construit un bouton qui grossit au survol de la souris.

<body>
    <div class="container">
        <div class="btn">
            Survole-moi!
        </div>
    </div>
</body>

Dans le fichier Sass, nous avions ajouté une pseudoclasse  :hover. Ainsi, au survol de la souris, la propriété  transform  permettait de le faire grossir de 15 % en 0.4 secondes.

.btn {
    background-color: $cd-btn;
    border: 4px solid $cd-btn;
    border-radius: 10rem;
    cursor: pointer;
    font-size: 3rem;
    overflow: hidden;
    padding: 1.85rem 3rem;
    position: relative;
    transition: transform 400ms;
    &:hover {
        transform: scale(1.15);
    }
}

Essayons ensemble de corser tout ça en créant une action secondaire : au survol de la souris, non seulement le bouton grossira, mais on lui appliquera également un effet de fondu.

Une animation d'un bouton qui grossit avec un fondu

Il existe plusieurs moyens d’animer l’opacité d’un élément. Nous verrons plus tard dans ce cours le moyen le plus performant. Mais pour le moment, par souci de simplicité, nous changerons la valeur de la propriété  background-color  entre deux valeurs rgba. Pour cela, nous utiliserons deux variables Sass :

$cd-btn-start: rgba(1, 28, 55, 0);
$cd-btn-end: rgba(1, 28, 55, 1);

Les deux variables ont la même valeur RGB. Seule leur valeur alpha diffère, avec une valeur de 0 pour $cd-btn-start, et 1 pour $cd-btn-end. La première est ainsi transparente, alors que la seconde sera opaque.

Nous sommes maintenant prêts à ajouter nos variables de couleur à la pseudoclass  :hover  du sélecteur  .btn.

.btn {
    background-color: $cd-btn-start;
    border: 4px solid $cd-btn;
    border-radius: 10rem;
    cursor: pointer;
    font-size: 3rem;
    padding: 1.85rem 3rem;
    &:hover {
        transform: scale(1.13);
        background-color: $cd-btn-end;
    }
}

On a donc maintenant un bouton avec un  :hover  qui fonctionne. Ajoutons maintenant une transition 🤩

Une animation CSS d'un bouton qui grossit

Lorsque vous souhaitez créer une transition à propriétés multiples, plutôt que de taper le nom de la propriété à laquelle nous voulons ajouter une transition…

transition: transform 450ms;

On peut utiliser à la place le mot clé  all  :

transition: all 450ms;

Le mot clé   all  nous permet d’indiquer au navigateur d’appliquer la transition à toutes les propriétés que nous avons modifiées au sein de la pseudoclasse  :hover. Ajoutons donc une transition à notre sélecteur  .btn  pour animer à la fois l’échelle du bouton et l’opacité de son arrière-plan :

.btn {
    background-color: $cd-btn-start;
    border: 4px solid $cd-btn;
    border-radius: 10rem;
    cursor: pointer;
    font-size: 3rem;
    overflow: hidden;
    padding: 1.85rem 3rem;
    position: relative;
    transition: all 450ms;
    &:hover {
        transform: scale(1.13);
        background-color: $cd-btn-end;
    }
}

Voyons ce que cela donne maintenant :

Une animation CSS d'un bouton qui grossit avec un fondu

Youpiiiii !!! 🥳

On a bien les deux transitions en même temps !

Séparez les propriétés 

L’utilisation du mot-clé all  est parfaite pour déclencher plusieurs changements au même moment et pour la même durée, mais il existe un autre moyen d’ajouter des propriétés multiples à une transition.

Au lieu d’utiliser  all, nous pouvons faire une liste des animations de chaque propriété à laquelle nous voulons ajouter une transition, séparées par des virgules. Dans notre exemple de transitions pour transformer et changer la couleur de fond, on pourrait les séparer comme ça :

transition: transform 450ms, background-color 450ms; 

Maintenant qu’on a séparé les propriétés, on peut donner une durée différente à leur transition. C’est très utile pour obtenir un rendu moins uniforme, et ainsi créer quelque chose de plus intéressant visuellement et de plus engageant pour l’utilisateur. Rendons notre transition background-color un peu plus rapide que celle de l’échelle du bouton, en réduisant sa durée à 300 ms :

transition: transform 450ms, background-color 300ms;

Maintenant, notre   background-color  devient totalement opaque avant que le bouton ait terminé de grossir. La différence n’est pas énorme, mais ces quelques fractions de secondes permettent de rendre l’animation un peu moins parfaite et lui apportent un peu de texture :

Une animation CSS avec un background-color à 450ms
Une animation CSS avec un background color à 300ms

En séparant les transitions, il devient possible d’attribuer des durées spécifiques à chaque effet, ce qui nous permet d’ajouter de la complexité à nos animations, les rendant alors plus intéressantes et plus engageantes. Mais ce n’est pas tout ! Il y a plus que les durées…

Retardez le début d'une transition

Pour le moment, nous avons créé une même transition pour deux propriétés ayant des durées propres. Mais les deux commencent en même temps. Le background-color devient donc totalement opaque avant la fin de la transition transform. Ce qui serait parfait, ce serait de faire commencer la transition  background-color 150 ms  plus tard, pour que les deux transitions se terminent en même temps.

Pour cela, nous pouvons utiliser la propriété  transition-delay. Cette propriété retarde le début de l’animation de transition par la valeur de temps que vous indiquez. Pour retarder une transition de 150 ms, le code est donc le suivant :

transition-delay: 150ms;

Ici, notre propriété  transition  concerne deux propriétés différentes. Il faut donc spécifier une valeur pour chacune d’elles. Attention à bien respecter l'ordre qu'on a utilisé juste avant pour préciser la durée de chaque propriété. Dans notre cas précis, nous ne voulons pas retarder l’animation de transformation, mais celle de couleur d’arrière-plan :

transition: transform 450ms, background-color 300ms;
transition-delay: 0ms, 150ms;

Avec  transition-delay  nos transitions vont commencer à 150 ms d’écart et se terminer simultanément. Tout comme  transition-property   et  transition-duration, cette propriété peut être définie directement dans transition, en l’indiquant juste après  transition-duration.

transition: transform 450ms, background-color 300ms 150ms;

Si aucune valeur n’est précisée pour  transition-delay, la propriété transition n’appliquera aucun délai. Ici, on peut donc s’en passer pour la transition appliquée à transform. Regardons à quoi ressemble notre code :

.btn {
    background-color: $cd-btn-start;
    border: 4px solid $cd-btn;
    border-radius: 10rem;
    cursor: pointer;
    font-size: 3rem;
    overflow: hidden;
    padding: 1.85rem 3rem;
    position: relative;
    transition: transform 450ms, background-color 300ms 150ms;
    &:hover {
        transform: scale(1.13);
        background-color: $cd-btn-end;
    }
}

Voilà ce que ça donne pour notre bouton :

Une animation CSS utilisation la transition delay

Et vous, ça vous plaît plus comme ça ? N'hésitez pas à ajuster les valeurs et à faire des tests selon vos préférences 🔥.

Dans la vie réelle, les choses ne se déroulent pas de manière parfaitement simultanée. Si nous regardions des images ultra-ralenties, nous verrions les images arriver les unes après les autres. Nos cerveaux se sont habitués à voir des successions d’événements séparés par une rupture, même si elle ne dure qu’une fraction de seconde.

Décaler le minutage de nos animations, à la fois en modifiant leur durée et en retardant leur déclenchement, nous permet de créer des effets visuels plus authentiques, plus intéressants et plus captivants.

En résumé

  • il est possible d’animer autant de propriétés que l’on veut avec les transitions ;

  • le mot clé   all  permet d’appliquer des transitions simultanément à toutes les propriétés ;

  • ou bien on peut séparer les animations par des virgules, ce qui permet de leur donner des valeurs différentes. Exemple :  transition: transform 450ms, background-color 300ms;

  • on peut décaler le départ des transitions avec  transition-delay ;

  • la valeur de  transition-delay  peut également être définie directement dans la propriété  transition.

Maintenant que nous avons ajouté une nouvelle corde à notre arc pour les transitions, nous allons apprendre à donner une véritable masse à nos animations, en travaillant sur leurs accélérations et ralentissements. Pour cela, nous allons maîtriser la propriété  transition-timing-function. Alors rendez-vous au chapitre suivant ! 🚀

Exemple de certificat de réussite
Exemple de certificat de réussite