English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La propriété CSS transition vous permet de définir la transition entre deux états d'un élément. C'esttransition-property，transition-duration，transition-timing-functionettransition-delayPropriété abrégée
Le tableau suivant explique l'utilisation et l'historique des versions de cette propriété, ainsi que la syntaxe d'utilisation de cette propriété dans les scripts JavaScript.
| Valeur par défaut : | all 0 ease 0; Voir toutes les propriétés |
|---|---|
| S'applique à : | Tous les éléments ::before et ::after Élément pseudo |
| Héritage : | Aucun |
| Animation possible : | Non.Veuillez consulter Propriétés d'animation。 |
| Version : | CSS3nouvelle fonctionnalité |
| JavaScript Syntaxe : | object.style.transition="width 2s" |
La syntaxe de cette propriété est la suivante :
transition: transition1 ,[ transition2,…transitionN] | initial | inherit where transition is: [ transition-property | transition-duration | transition-timing-function | transition-delay ]
Les exemples suivants montrent comment utiliser la propriété transition.
button {
background: #fd7c2a;
-webkit-transition-property: background 2s; /* Pour Safari 3.0+ */
transition: background 2s;
}
button:hover {
background: #3cc16e;
}Testez et voyez‹/›Le tableau suivant décrit les valeurs de cette propriété.
| Valeur | Description |
|---|---|
| transition-property | Spécifiez le nom de la propriété CSS à laquelle l'effet de transition doit être appliqué. |
| transition-duration | Spécifiez en secondes ou en millisecondes le temps nécessaire pour que l'animation de transition soit terminée. |
| transition-timing-function | Spécifiez comment calculer la valeur intermédiaire de la propriété CSS affectée par la transition. |
| transition-delay | Spécifiez quand commencer la transition. |
| initial | Définir cette propriété à sa valeur par défaut. |
| inherit | Si spécifié, l'élément lié utilise la valeur de la propriété transition de son élément parent. |
La compatibilité des navigateurs pour la propriété transition, les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cette propriété ; tous les navigateurs populaires prennent en charge cette propriété.
|
Veuillez consulter les tutoriels suivants :CSS3 Transitions。
Propriétés associées :transition-delay，transition-duration，transition-property，transition-timing-function。