À 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 :
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 :
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 :
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.
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 :
« 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;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 :
Pour ce qui est des fonctions, on en retrouvera 2 qui sont « steps » et « cubic-bezier ».
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.
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;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;
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 :
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.