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.
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 🤩
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 :
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 :
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 :
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é
allpermet 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-delaypeut é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 ! 🚀
