OUJOOD.COM
Tutoriel sur la propriété CSS transition
Définition
La propriété CSS transition permet de spécifier une transition fluide entre deux états d'un élément lorsqu'un changement de propriété a lieu. Cela permet de créer des animations simples sans avoir besoin d'utiliser des animations complexes en CSS ou JavaScript.
La propriété de transition est une propriété raccourcie pour :
Syntaxe générale
selector {
transition: property duration timing-function delay;
}
| Valeurs par défaut | all 0s ease 0s |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.transition="all 2s" |
Valeurs possibles
- property: spécifie la ou les propriétés CSS qui doivent être animées.
- duration: spécifie la durée de la transition en secondes ou en millisecondes.
- timing-function: spécifie la courbe de transition pour contrôler l'accélération ou la décélération de l'animation.
- delay: spécifie un délai avant que la transition ne commence.
Exemples pratiques d'utilisation
Animation de la propriété background-color
Les propriétés de transition permettent aux éléments de changer de valeur pendant une durée déterminée, en animant les changements de propriété plutôt qu'en les faisant se produire immédiatement. Ainsi, si nous avons, par exemple, une boîte à fond rouge que nous voulons transformer en fond vert lorsqu'elle est survolée par la souri, nous pouvons utiliser la propriété de transition pour passer d'une couleur d'arrière-plan à l'autre :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple : la propriété transition css</title>
<style>
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 20px 5px;
color:#fff;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: green;
cursor: pointer;
}
</style>
</head>
<body>
<h1>La propriété css transition </h1> <br>
<div class="box">Survoler moi avec la souri</div>
</body>
</html>
Remarquez que nous avons appelé la propriété background-color dans la déclaration de transition. Cela indique au navigateur que nous prévoyons d'effectuer une transition entre les couleurs d'arrière-plan et rien d'autre, lorsqu'une transition se produit entre l'état survolé et l'état non survolé.
Remarquez également que nous avons indiqué au navigateur que la transition devait durer deux secondes et suivre une fonction de temporisation de type "ease-out", ce qui signifie que la transition commence rapidement, puis ralentit vers la fin.
Animation de plusieurs propriété à la fois
Dans cet exemple nous animons les propriété css : Height , width et background-color avec une durée de transition de 1 seconde pour chaque propriété
Voici un exemple qui montre comment la propriété transition peut être utilisée pour animer un élément lorsqu'il est survolé :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple : la propriété transition css</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: blue;
transition: width 1s, height 1s, background-color 1s;
color:#fff;
padding:25px 5px;
}
.box:hover {
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<h1>La propriété css transition </h1> <br>
<div class="box">Survoler moi avec la souri</div>
</body>
</html>
Ce qui donne
Spécifier quelles propriétés doivent faire l'objet d'une transition
Vous pouvez spécifier une propriété particulière ou plusieurs comme nous l'avons fait ci-dessus, ou utiliser la valeur all pour faire référence aux propriétés de transition comme le montre l'exemple suivant:
.element {
transition: all 0.5s ease;
background: red;
padding: 10px;
}
.element:hover {
background: green;
padding: 20px;
}
Le code ci-dessus présente un exemple d'utilisation de la propriété CSS "transition" avec la pseudo-classe ":hover" pour créer une transition d'animation fluide lorsqu'un élément est survolé.
Dans ce cas, l'élément ciblé est défini par la classe ".element". Voici une explication ligne par ligne du code :
- 1. La classe ".element" est déclarée pour cibler un élément spécifique dans le HTML.
- 2. La ligne "transition: all 0.5s ease;" définit la propriété de transition pour l'élément. Ici, "all" indique que toutes les propriétés CSS de l'élément seront incluses dans la transition. "0.5s" spécifie la durée de la transition, qui est de 0,5 seconde. "ease" représente la fonction de minutage de la transition, ce qui signifie qu'elle commencera lentement, accélérera au milieu, puis ralentira vers la fin de la transition.
- 3. La ligne "background: red;" définit la couleur de fond de l'élément comme étant rouge.
- 4. La ligne "padding: 10px;" ajoute un espace de remplissage de 10 pixels à l'intérieur de l'élément.
Ensuite, nous avons la pseudo-classe ":hover" qui s'applique lorsque l'élément est survolé par le curseur de la souris :
- 5. La classe ".element:hover" est déclarée pour définir les styles lorsque l'élément est survolé.
- 6. La ligne "background: green;" change la couleur de fond de l'élément en vert lorsqu'il est survolé.
- 7. La ligne "padding: 20px;" modifie l'espace de remplissage de l'élément pour être de 20 pixels lorsqu'il est survolé.
Ainsi, lorsque l'élément est survolé, la transition spécifiée dans la classe ".element" sera appliquée, ce qui entraînera une transition fluide de la couleur de fond et de l'espace de remplissage de l'élément sur une durée de 0,5 seconde, avec une fonction de minutage "ease".
Cela permet de créer un effet visuel d'animation lorsqu'on passe la souris sur l'élément, avec un changement en douceur de la couleur de fond et de l'espace de remplissage.
Astuces et conseils d'utilisation
- Utilisez des valeurs appropriées pour la durée et le délai afin d'obtenir l'effet de transition souhaité.
- Expérimentez avec différentes fonctions de minutage (ease-in, ease-out, ease-in-out, etc.) pour obtenir différents effets d'animation.
- Utilisez les transitions sur des propriétés comme la couleur, la taille, la position, etc., pour créer des animations plus complexes.
- Combinez les transitions avec d'autres propriétés CSS comme "transform" pour créer des animations encore plus avancées.
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
Les numéros suivis de -webkit- , -moz- ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |