À l’heure actuelle, on retrouve des animations web sur n’importe quel site internet.
Que ce soit pour changer la couleur d’un bouton lorsqu’on le survole ou pour animer une image entière lorsqu’on clique dessus, les transitions CSS sont derrière de nombreuses animations web.
Outre l’aspect esthétique qu’apportent les transitions CSS, elles jouent aussi un rôle dans l’expérience utilisateur.
En effet, animer des éléments lorsqu’une action est possible ou lorsqu’une action a été effectuée par l’utilisateur permet de mieux indiquer à l’utilisateur les actions possibles ou qu’il a réalisées.
Dans ce tutoriel, vous découvrirez les propriétés permettant de réaliser des transitions en CSS, comment vous pouvez les utiliser et un cas pratique utilisant les transitions CSS.
Sommaire :
Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.
Trouver un développeur web
Les propriétés « transition » en CSS
Il existe 4 propriétés de transition en CSS qui ont chacune un rôle à jouer dans l’animation d’un élément web.
Ces propriétés sont les suivantes :
- transition-property : cible les propriétés CSS à animer en y indiquant leur nom ;
- transition-delay : permet de définir un délai avant le début de la transition ;
- transition-duration : indique la durée totale de la transition ;
- transition-timing-function : décrit la façon dont sera exécutée la transition.
Grâce à ces propriétés « transition » vous allez pouvoir paramétrer des animations sur des propriétés CSS données.
Il est possible de rassembler l’ensemble de ces propriétés dans une super propriété nommée « transition ».
Il est essentiel de renseigner les deux propriétés « transition-property » et « transition-duration » au minimum pour qu’une transition soit effective sur un élément.
Il faut aussi savoir que toutes les propriétés CSS ne peuvent pas être animées, une liste des propriétés CSS pouvant être animées existe et seules les propriétés présentes dans cette liste pourront être utilisées avec la propriété « transition-property ».
Dans ce premier exemple, nous utilisons les propriétés nécessaires à l’animation d’une propriété CSS vue précédemment pour animer le changement de la couleur de fond d’un élément HTML « div » lorsqu’un l’utilisateur survole ce même élément :
div {
width: 100px;
height: 100px;
background-color: blue;
transition-property: background-color;
transition-duration: 4s;
transition-delay: 1s;
transition-timing-function: ease-out;
}
div:hover {
background-color: red;
}Ce code permet d’animer un bloc de taille de 100×100 pixels initialement de couleur bleue en changeant sa couleur en rouge au survol. L’impact des propriétés « transition » est la suivante :
- « transition-property: background-color » indique que seule la propriété « background-color » devra être impactée lorsque qu’un changeant de valeur se produira.
- « transition-duration: 4s » permet que le changement total de couleur (bleu > rouge et rouge > bleu) mette 4 secondes à s’effectuer.
- « transition-delay: 1s » ajoute un court délai de 1 seconde avant que l’animation, le changement de couleur, ne s’exécute.
- « transition-timing-function: ease-out » détermine la manière dont la transition sera effectuée. Ici, la transition sera « ease-out » c’est-à-dire lente au début et rapide vers la fin.
La transition effectuée avec ce code pourrait aussi fonctionner sans problème si on supprimait les lignes « transition-delay » et « transition-timing-function ».
La transition serait légèrement différente, mais obligerait toujours à ce que le changement de couleur de « background-color » s’effectue sur une durée de 4 secondes.
transition-property
Cette propriété « transition-property » prend comme valeur les noms des propriétés CSS qui seront affectées par les autres propriétés de transition.
Il est possible de renseigner plusieurs noms de propriétés CSS à la suite en les séparant par des « , » :
transition-property: background-color, margin, color;Des mots-clés peuvent aussi être utilisés tels que :
- « all » pour désigner l’ensemble des propriétés CSS qui peuvent être animées
- « none » pour ne plus cibler aucune propriété CSS
transition-duration
« transition-duration » est la seconde propriété essentielle pour créer une transition sur une ou plusieurs propriétés d’un élément.
Elle permet de définir la durée d’une transition sur une propriété donnée. Il est possible de lui indiquer une durée en seconde avec l’unité « s » ou en millisecondes avec l’unité « ms » :
transition-duration: 3s;
transition-duration: 3000ms;Tout comme « transition-property » qui peut avoir plusieurs noms de propriétés, « transition-duration » peut aussi avoir plusieurs durées uniques pour chaque propriété définie dans « transition-property ».
Ainsi, pour définir une durée unique à chaque propriété CSS il faudra ajouter autant de durée, séparées par une « , », qu’il y a de propriété définie dans « transition-property » :
transition-property: background-color, margin, color;
transition-duration: 3s, 2s, 4s;
Trouvez le meilleur développeur web sur Codeur.com
Vos premiers devis en 15 minutes
Gratuit et sans obligation
Déjà plus de 75 000 clients
transition-timing-function
La propriété « transition-timing-function » permet de déterminer la façon dont s’exécutera la transition sur une propriété donnée.
Cette propriété prend comme valeur un mot-clé ou une fonction pour chaque propriété CSS définie dans « transition-property ».
En effet, vous pouvez indiquer un mot-clé ou fonction général pour toutes les propriétés ou un mot-clé ou fonction uniques pour chaque propriété CSS.
Les mots-clés les plus couramment utilisés sont :
- « ease » est le mot-clé donné par défaut comme valeur si vous n’en spécifiez aucune. La transition sera rapide au début puis ralentir vers la fin.
- « ease-in » ralenti la transition au début pour l’accélérer de plus en plus sur la fin
- « ease-out » à l’inverse de « ease-in » la transition sera rapide au début puis sera ralentie graduellement sur la fin.
- « ease-in-out » combine « ease-in » et « ease-out » pour avoir un milieu de transition équilibré avec un début et une fin lents.
- « linear » permet d’avoir une transition constante avec une vitesse qui ne change pas.
Pour ce qui est des fonctions, on en retrouvera 2 qui sont « steps » et « cubic-bezier ».
- « steps » permet de découper une transition en plusieurs étapes de durées égales dont les vitesses seront définies par un paramètre « jumpterm » auquel on peut attribuer plusieurs valeurs spécifiques à « steps ».
- « cubic-bezier » est une fonction permettant de créer une courbe de Béziers définissant la vitesse d’une transition. Elle comprend 4 paramètres d’une valeur allant de 0 à 1.
Tous les mots-clés vu précédemment ont une correspondance en utilisant « cubic-bezier », par exemple une transition en « ease-out » correspond à la valeur « cubic-bezier(0, 0, 0.58, 1.0) »
Les fonctions sont des valeurs complexes qui ne seront pas plus détaillées ici, cependant vous pouvez créer votre propre courbe de Béziers à l’aide du site cubic-bezier.com qui propose un outil graphique pour créer ses proposes fonctions « cubic-bezier » facilement.
transition-delay
Cette propriété « transition-delay » prend une durée comme valeur pour définir un délai avant l’exécution d’une transition.
Tout comme « transition-duration » , vous pouvez indiquer cette durée en seconde avec l’unité « s » ou en « milliseconde » avec l’unité « ms » :
transition-delay: 1s;
transition-delay: 1000ms;Vous pouvez définir un délai différent pour chaque propriété CSS qui sera définie dans « transition-property » comme dans l’exemple suivant :
transition-property: background-color, margin, color;
transition-duration: 200ms, 1500ms, 500ms;transition
La propriété « transition » est une propriété raccourcie permettant de définir les valeurs des propriétés vues ci-dessus en une seule propriété.
Les valeurs des propriétés de transition devront respecter un ordre précis dans la propriété « transition » qui est le suivant :
transition: < transition-property> < transition-duration> < transition-timing-function> < transition-delay>;Il est possible de définir plusieurs transitions pour différentes propriétés CSS en une seule ligne en les séparant par une virgule comme dans cet exemple :
transition: background-color 3s ease 200ms, margin 2s linear 1500ms, color 4s ease-in 500ms;
Cas pratique : Transition CSS
Prenons comme exemple une « div » simple avec écrit « Bonjour » dedans, un fond bleu, le texte en rouge et une marge de 50 pixels.
HTML :
<div>
Bonjour
</div>CSS :
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: blue;
color: red;
}On modifie les propriétés CSS dans la pseudo-classe « hover » de l’élément HTML « div » pour créer un changement lors du survol de la « div » avec la souris :
div:hover {
margin: 0px;
background-color: black;
color: white;
}Actuellement aucune transition n’est appliquée sur l’élément « div » ce qui aura pour effet de changer immédiatement les propriétés CSS renseignées dans la pseudo-classe « hover ».
En intégrant quelques transitions dans la propriété « transition » de l’élément « div », on peut créer une animation visuelle lorsque les changements de la pseudo-classe « hover » interviennent :
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: blue;
color: red;
transition: background-color 3s ease 200ms, margin 2s linear 1500ms, color 4s ease-in 500ms;
}En passant la souris sur l’élément « div » on remarquera donc que :
- Le fond bleu change vers le noir en 3 secondes après un délai de 200 millisecondes en étant plus rapide au début qu’à la fin.
- La marge se réduit en 2 secondes après un long délai de 1500 millisecondes rapprochant l’élément « div » vers le coin supérieur gauche de la fenêtre sans changement de vitesse.
- La couleur du texte se changera lentement en blanc durant 4 secondes en commençant 500 millisecondes après le début de la transition et deviendra de plus en plus blanche vers la fin de l’animation.
Conclusion
Les transitions CSS offrent énormément de possibilités pour rendre vivant votre site web.
Ces transitions donneront plus d’impact aux éléments de votre site ce qui vous permettra de capter plus facilement l’attention des visiteurs ou d’améliorer l’expérience utilisateur de votre site.
Bien que ce tutoriel vous donne les clés pour créer vos propres transitions, il vous faudra tout de même beaucoup de pratique pour pouvoir les maitriser et créer des transitions complexes.
N’hésitez pas à poster une annonce gratuite sur Codeur.com pour trouver rapidement un freelance qui pourra vous aider à créer des transitions CSS fluides pour animer votre site web.
