transition
==========

La propriété **`transition`** est une propriété raccourcie pour les propriétés `transition-property`, `transition-duration`, `transition-timing-function` et `transition-delay`.

Exemple interactif
------------------

Elle permet de définir la transition entre deux états d'un élément. Les différents états peuvent être définis à l'aide de pseudo-classes telles que `:hover` ou `:active` ou être définis dynamiquement avec JavaScript.

Syntaxe
-------


```css
/\* S'applique à une propriété \*/
/\* on a le nom et la durée \*/
transition: margin-right 4s;

/\* nom de la propriété | durée | retard \*/
transition: margin-right 4s 1s;

/\* nom | durée | fonction \*/
transition: margin-right 4s ease-in-out;

/\* nom | durée | fonction | retard \*/
transition: margin-right 4s ease-in-out 1s;

/\* S'applique à deux propriétés \*/
transition:
  margin-right 4s,
  color 1s;

/\* S'applique à toutes les propriétés modifiées \*/
transition: all 0.5s ease-out;

/\* Valeurs globales \*/
transition: inherit;
transition: initial;
transition: unset;
```


La propriété `transition` se définit comme une ou plusieurs propriétés de transitions, séparées par des virgules.

Chacune des propriétés de transition décrit la transition qui devrait être appliquée à une propriété donnée (ou pour les valeurs spéciales `all` et `none`). Une propriété de transition inclut :

* zéro ou une valeur qui représente la propriété à laquelle la transition s'applique. Ça peut être :
    + le mot-clé `none`
    + le mot-clé `all`
    + Un identifiant (`<custom-ident>`) qui nomme une propriété CSS.
* zéro ou une valeur `<single-transition-timing-function>` (en-US) qui représente la fonction de temporisation utilisée pour la transition
* zéro, une ou deux valeurs `<time>`. La première valeur qui peut être interprétée comme un temps sera affectée à la propriété `transition-duration` et la seconde valeur qui peut être affectée comme un temps sera affectée à la propriété `transition-delay`.

Si la liste des valeurs est trop courte pour les différentes propriétés, les valeurs seront répétées. Si la liste est trop longue, elle sera tronquée.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `transition-delay`: `0s`
* `transition-duration`: `0s`
* `transition-property`: tous
* `transition-timing-function`: `ease`
* `transition-behavior` (en-US): `normal`
 |
| Applicabilité | tous les éléments, ainsi que les pseudo-elements `::before` et `::after` |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `transition-delay`: comme spécifié
* `transition-duration`: comme spécifié
* `transition-property`: comme spécifié
* `transition-timing-function`: comme spécifié
* `transition-behavior` (en-US): comme spécifié
 |
| Type d'animation | Not animatable |

Syntaxe formelle
----------------
```

transition =   
  <single-transition>#    
  
<single-transition> =   
  [ none | <single-transition-property> ]  ||  
  <time>                                   ||  
  <easing-function>                        ||  
  <time>                                     
  
<single-transition-property> =   
  all             |  
  <custom-ident>    
  
<easing-function> =   
  linear                          |  
  <linear-easing-function>        |  
  <cubic-bezier-easing-function>  |  
  <step-easing-function>            
  
<linear-easing-function> =   
  linear( <linear-stop-list> )    
  
<cubic-bezier-easing-function> =   
  ease                                                |  
  ease-in                                             |  
  ease-out                                            |  
  ease-in-out                                         |  
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )    
  
<step-easing-function> =   
  step-start                             |  
  step-end                               |  
  steps( <integer> , <step-position>? )    
  
<linear-stop-list> =   
  [ <linear-stop> ]#    
  
<step-position> =   
  jump-start  |  
  jump-end    |  
  jump-none   |  
  jump-both   |  
  start       |  
  end           
  
<linear-stop> =   
  <number>               &&  
  <linear-stop-length>?    
  
<linear-stop-length> =   
  <percentage>{1,2}    
  
```

Exemples
--------

Plusieurs exemples de transitions CSS sont présentés sur l'article sur les transitions CSS.

Spécifications
--------------

| Specification |
| --- |
| CSS Transitions # transition-shorthand-property |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser les transitions CSS
* `TransitionEvent`