Propriété de transition CSS
Exemple
Survolez un élément <div> pour modifier progressivement la largeur de 100px à 300px :
div
{
width: 100px;
transition: width 2s;
}
div:hover {
width: 300px;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La transition
propriété est une propriété abrégée pour :
- propriété de transition
- durée de transition
- fonction de synchronisation de transition
- délai de transition
Remarque : spécifiez toujours la propriété transition-duration , sinon la durée est de 0 s et la transition n'aura aucun effet.
Valeur par défaut: | tous les 0 facilitent les 0 |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.transition="tous les 2" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit-, -moz- ou -o- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Syntaxe CSS
transition: property duration timing-function delay|initial|inherit;
Valeurs de propriété
Value | Description |
---|---|
transition-property | Specifies the name of the CSS property the transition effect is for |
transition-duration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transition-timing-function | Specifies the speed curve of the transition effect |
transition-delay | Defines when the transition effect will start |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Lorsqu'un <input type="text"> obtient le focus, changez progressivement la largeur de 100px à 250px :
input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
Pages connexes
Tutoriel CSS : Transitions CSS
Référence HTML DOM : propriété de transition