OUJOOD.COM
Tutoriel sur la propriété CSS transition-property
La propriété CSS transition-property permet de spécifier les propriétés CSS sur lesquelles une transition doit être appliquée lorsqu'un changement de valeur se produit. Cela permet d'animer en douceur les changements de style de vos éléments.
Syntaxe générale
La syntaxe générale de la propriété transition-property est :
.element {
transition-property: propriété1, propriété2, ..., propriétéN;
}
| Valeurs par défaut | all |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.transitionProperty="width,height" |
Valeurs possibles
La valeur de la propriété transition-property peut être :
- all : applique la transition à toutes les propriétés CSS.
- none : aucune transition n'est appliquée.
- propriété : spécifie une propriété CSS spécifique sur laquelle appliquer la transition. Vous pouvez spécifier plusieurs propriétés en les séparant par des virgules.
Exemples pratiques d'utilisation
Voici un exemple d'utilisation de la propriété transition-property :
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: 100px;
background-color: coral;
transition-property: width;
transition-duration: 1s;
}
.box:hover {
width: 400px;
}
</style>
</head>
<body>
<h1>La propriété css transition </h1> <br>
<div class="box">Survoler moi avec la souri</div>
</body>
</html>
et voici le résultat:
Survoler moi avec la souri
Astuces et conseils d'utilisation
- Utilisez la valeur all pour appliquer la transition à toutes les propriétés CSS d'un élément.
- Utilisez des virgules pour spécifier plusieurs propriétés sur lesquelles appliquer la transition.
- Veillez à définir une valeur pour la propriété transition-duration afin de spécifier la durée de la transition.
- Utilisez les valeurs ease, linear, ease-in, ease-out, ease-in-out pour la propriété transition-timing-function afin de contrôler l'accélération et le ralentissement de la transition.
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- |