1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
---
title: transition-property
slug: Web/CSS/transition-property
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/transition-property
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>transition-property</code></strong> désigne les noms des propriétés CSS sur lesquelles <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">un effet de transition</a> devrait être appliqué.</p>
<div>{{EmbedInteractiveExample("pages/css/transition-property.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<div class="note"><strong>Note :</strong> <a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">L'ensemble des propriétés CSS qui peuvent être animées</a> évolue. Vous devriez donc éviter de lister ici des propriétés qui, actuellement, ne sont pas animées car elles pourraient l'être demain et cela pourrait affecter votre document.</div>
<p>Si vous définissez une propriété raccourcie (par exemple {{cssxref("background")}}), toutes les propriétés détaillées correspondantes seront animées de la même façon.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush: css no-line-numbers">/* Avec un mot-clé */
transition-property: none;
transition-property: all;
/* Valeurs utilisant un identifiant */
/* <custom-ident> */
transition-property: test1;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;
/* Valeurs multiples */
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property: all, -moz-specific, sliding;
/* Avec des valeurs globales */
transition-property: inherit;
transition-property: initial;
transition-property: unset;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>none</code></dt>
<dd>Aucune propriété n'est concernée par les transitions.</dd>
<dt><code>all</code></dt>
<dd>Toutes les propriétés qui peuvent avoir une transition animée seront concernées.</dd>
<dt><code><custom-ident></code></dt>
<dd>Une chaîne de caractère qui identifie la propriété pour laquelle on doit appliquer un effet de transition lorsque sa valeur change. Pour plus de détails sur la forme de cet identifiant, voir la page sur le type {{cssxref("<custom-ident>")}}.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<p>Il y a plusieurs exemples sur les transitions CSS qui se trouvent dans <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">l'article sur les transitions CSS</a>.</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#transition-property-property', 'transition-property')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<div>{{cssinfo}}</div>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.transition-property")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Utiliser les transitions CSS</a></li>
<li>{{domxref("TransitionEvent")}}</li>
</ul>
|
