Commencez les choses sérieuses : les transitions
Maintenant que je vous ai convaincu du large potentiel des animations CSS, il est temps de commencer les choses sérieuses !
Il existe deux moyens de créer des animations en CSS : les transitions, et les keyframes.
Je vous disais que les keyframes sont à mon sens la technique la plus fun pour les animations. C'est en fait parce qu'elles permettent d'aboutir à des animations plus élaborées... Mais elles sont aussi plus complexes à mettre en place.
Les transitions, quant à elles, sont plus limitées, mais particulièrement simples à créer. Elles permettent à un élément de passer d'un état A à un état B. Elles sont parfaites pour une animation simple, comme le changement d'un bouton au survol de la souris.
Donc n'attendons plus, lançons-nous dans nos premières transitions !
Pour créer une transition, vous aurez besoin de plusieurs informations :
une propriété CSS à modifier ;
une valeur initiale pour votre propriété CSS ;
une valeur finale pour cette même propriété ;
une durée ;
un événement pour déclencher votre transition.
Imaginons que vous vouliez agrandir un bouton de 15 % en une seconde.
Comme je vous le disais, la première information nécessaire pour une transition est une propriété CSS à modifier. Puisqu'ici nous voulons que le bouton grossisse quand un utilisateur passe sa souris dessus, nous pouvons choisir la propriété transform et sa fonction scale().
Vous n'êtes pas encore familier avec la propriété transform et ses nombreuses fonctions ? Surtout, pas de panique. Nous les verrons en détail dans les chapitres suivants ! Pour le moment, sachez juste que la fonction scale() permet de modifier la taille d’un élément, selon la valeur qu’on lui donne, sachant que 0 = 0 % et 1 = 100 %.
Ici, nous allons utiliser du Sass.
Sass a créé un nouveau langage à partir du CSS : le SCSS. Tout ce qui est valide en CSS l'est aussi en SCSS, mais il y ajoute des expressions, des fonctions, des variables, une logique conditionnelle et des boucles. Il utilise ensuite un préprocesseur (un programme qui fonctionne sur votre ordinateur ou sur un serveur) chargé de traduire cette nouvelle syntaxe intelligente en CSS.
Jetons un œil au code HTML que nous avons utilisé pour créer notre bouton :
<body>
<div class="container">
<div class="btn">
Vois comme je grandis !
</div>
</div>
</body>Ce bouton est constitué d’une div à laquelle est appliquée la classe .btn, complétée du texte du bouton. Si on regarde le Sass, on peut voir qu’on a utilisé la classe .btn pour définir la couleur du bouton, sa marge et ses dimensions :
$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
background: $cd-btn;
color: $cd-txt;
font-size: 3rem;
cursor: pointer;
padding: 1.85rem 3rem;
border-radius: 10rem;
}Nous avons donc nos informations : nous avons choisi la propriété transform, que nous allons faire passer d'une valeur de 1.0 (100 %), à une échelle de 1.15 (115 %) quand la souris passe sur le bouton, en une seconde.
Passez d’un état A à un état B
Ajoutons maintenant le transform et sa fonction scale() à notre classe .btn :
$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
background: $cd-btn;
color: $cd-txt;
font-size: 3rem;
cursor: pointer;
padding: 1.85rem 3rem;
border-radius: 10rem;
transform: scale(1);
}Étant donné que le bouton était déjà à l’échelle par défaut de 1, notre nouvelle propriété n'a pas changé grand-chose.
Eh oui, il nous faut la valeur finale !
Nous voulons que le bouton grossisse de 15 % au survol de la souris. Pour cela, nous avons besoin de la pseudoclasse :hover, avec la fonction scale() définie sur 1.15.
$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
background: $cd-btn;
color: $cd-txt;
font-size: 3rem;
cursor: pointer;
padding: 1.85rem 3rem;
border-radius: 10rem;
&:hover {
transform: scale(1.15);
}
}Les transitions doivent être déclenchées par un changement d’état, généralement par des pseudoclasses comme ici avec le :hover. Maintenant, quand nous testons notre bouton, nous pouvons voir notre point de départ et notre destination, mais il n’y a pas d’animation. Le bouton passe brusquement d'une taille à l'autre. 🙈
Pour ajouter un peu de fluidité, nous devons indiquer à notre navigateur que le changement d’échelle, entre l’état inactif et le :hover, devra se faire par une transition animée. Pour cela, vous pouvez ajouter la propriété transition-property au sélecteur .btn. On lui indique que la propriété transform est celle sur laquelle le navigateur doit appliquer une transition :
$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
background: $cd-btn;
color: $cd-txt;
font-size: 3rem;
cursor: pointer;
padding: 1.85rem 3rem;
border-radius: 10rem;
transition-property: transform;
&:hover {
transform: scale(1.15);
}
}Yaaaay nous avons ajouté une transition ! Voyons ce que ça donne :
Loupé 😤.
Mais pourquoi ???
Nous avons ajouté transition-property, mais rien ne se passe ! Vous vous souvenez, je vous ai dit qu'il fallait 5 informations pour une transition. Or, ici, nous n'avons pas indiqué la durée à notre navigateur. Il applique donc la durée par défaut... soit 0 seconde. Ce qui ne nous avance pas vraiment.
Si votre transition ne se déclenche pas, regardez où vous avez placé vos propriétés de transition. Elles doivent être dans le sélecteur qui contient le point de départ de l’élément. Il arrive souvent de les placer par erreur dans le sélecteur contenant la valeur de fin, comme par exemple le sélecteur :hover.
Modulez la durée de votre transition
La propriété transition-duration vous permet d'indiquer la durée que prendra votre transition.
transition-duration: 1s;En CSS, on peut exprimer une durée de plusieurs manières. En secondes, comme nous venons de le faire, en indiquant le nombre de secondes suivi de la lettre “s” ; mais aussi en millisecondes, 1 000 millisecondes faisant 1 seconde, suivies par les lettres “ms” :
transition-duration: 1000ms;Les deux méthodes permettent d'obtenir le même résultat, c’est donc surtout une question de préférence. Ici, utilisons les millisecondes pour ajouter une durée de 1 000 millisecondes à notre sélecteur .btn.
$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
background: $cd-btn;
color: $cd-txt;
font-size: 3rem;
cursor: pointer;
padding: 1.85rem 3rem;
border-radius: 10rem;
transition-property: transform;
transition-duration: 1000ms;
&:hover {
transform: scale(1.15);
}
}
Parfait !
On obtient bien l'effet de grossissement. Mais… ça paraît un peu long, non ? 🤔Il faut garder à l'esprit que les animations doivent être suffisamment courtes pour ne pas perturber l'utilisateur dans son expérience. Ici, on survole le bouton avec la souris, et il faut attendre la fin de la transition pour interagir : c'est définitivement trop long. On peut réduire la durée de transition-duration à quelque chose comme 400 ms pour voir ce que ça donne.
$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
background: $cd-btn;
color: $cd-txt;
font-size: 3rem;
cursor: pointer;
padding: 1.85rem 3rem;
border-radius: 10rem;
transition-property: transform;
transition-duration: 400ms;
&:hover {
transform: scale(1.15);
}
}Voyons voir…
Parfait ! Le bouton grossit de 15 % sur une durée de 400 millisecondes.
👏Bravo👏
Vous venez de construire votre première animation CSS !
Maîtrisez les propriétés raccourcies
Est-ce que vous vous souvenez de ce qu'on a dit précédemment ?
Pour déclarer une transition, vous pouvez ajouter la propriété
transition-propertyau sélecteur.btn
Il s'agit bien de “vous pouvez”, et non pas “vous devez”. Car il y a d’autres moyens de déclarer une transition.
transition-property: transform;
transition-duration: 400ms;La propriété transition vous permet de combiner toutes les propriétés en une. Elle commence par le nom de la propriété, un espace, puis la durée.
transition: transform 400ms;Les deux syntaxes produisent les mêmes résultats. Mais il est bien plus courant de définir les transitions par la propriété raccourcie transition, c’est donc ce que nous allons faire à partir de maintenant.
Refactorons donc le style de .btn en utilisant la propriété raccourcie transition.
$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
background: $cd-btn;
color: $cd-txt;
font-size: 3rem;
cursor: pointer;
padding: 1.85rem 3rem;
border-radius: 10rem;
transition: transform 400ms;
&:hover {
transform: scale(1.15);
}
}Nous avons simplifié le code, et notre bouton chéri fonctionne toujours parfaitement :
Ouf ! Cela fonctionne !
Et vous, vous avez réussi à refactorer avec la propriété raccourcie transition ?
C'est peut-être même l'occasion de manipuler quelques propriétés et de vous amuser avec le code du bouton. Je vous ai créé un CodePen pour que puissiez voir le code. 👩💻
Essayez de changer la couleur du bouton et sa police par exemple 😋
En résumé
les 5 éléments nécessaires pour créer une transition sont :
une propriété CSS à modifier,
une valeur initiale pour votre propriété CSS,
une valeur finale pour cette même propriété,
une durée,
une pseudoclasse pour déclencher l’animation ;
on applique la valeur initiale à l’élément qu’on veut modifier, et la valeur finale dans la pseudoclasse qui déclenche la transition ;
la durée peut s’exprimer en secondes : 0.4s, ou en millisecondes : 400ms ;
les propriétés d’une transition peuvent être déclarées individuellement : transition-duration: 400ms ;
ou bien combinées en une seule propriété comme : transition: transform 400ms .
Ici, nous avons utilisé la pseudoclasse :hover pour déclencher notre transition. Mais il existe de nombreuses autres pseudoclasses ! Je suis sûre que vous avez hâte d'en savoir plus. Pour ça, allez voir la suite du cours ! 🚀
