transition-delay

  • Raccourci de la révision : CSS/transition-delay
  • Titre de la révision : transition-delay
  • ID de la révision : 308555
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable() }}

Résumé

La propriété CSS transition-delay spécifie la quantité de temps à attendre entre un changement demandé sur une propriété qui doit subir une transition et le début de l'effet de transition.

Une valeur de 0s, ou 0ms, indique que la propriété devra débuter sa transition dès que sa valeur change ; les valeurs positives retardent le début de la transition de la valeur spécifiée. Les valeurs négatives donnentt l'impression que l'animation apparaît en cours d'effet.

Vous pouvez aussi spécifier des délais multiples ; chaque délai sera appliqué à la propriété correspondante comme spécifié par la propriété {{ cssxref("transition-property") }}, qui agit comme liste maîtresse. S'il y a moins de délais spécifiés que dans la liste maîtresse, les valeurs manquantes sont fixées à la valeur initiale (0s). S'il y a plus de délais, la liste est simplement coupé à la bonne taille. Dans les deux cas, la déclaration CSS reste valide.

  • {{ Xref_cssinitial() }} 0s
  • S'applique à tous les éléments, pseudo-éléments {{ cssxref("::before") }} et {{ cssxref("::after") }}
  • {{ Xref_cssinherited() }} non
  • Média {{ Xref_cssinteractive() }}
  • {{ Xref_csscomputed() }} comme spécifiée
  • {{ Xref_cssanimatable() }} non
  • {{ Xref_csscanonicalorder() }} l'ordre unique et non ambigu défini par la grammaire formelle

Syntaxe

Grammaire formelle : {{ xref_csstime() }} [, {{ xref_csstime() }}]*
transition-delay: 3s
transition-delay: 2s, 4ms

Valeurs

<time>
Est un {{ xref_csstime() }} décrivant la quantité de temps à attendre entre le changement de valeur de la propriété et le début de la transition.

Exemples

Il y a de nombreux exemples de transitions CSS inclues dans l'article Transitions CSS.

Spécifications

Spécification État Commentaires
{{ SpecName('CSS3 Transitions', '#transition-delay', 'transition-delay') }} {{ Spec2('CSS3 Transitions') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 {{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}
{{ CompatGeckoDesktop("16.0") }}
10.0 11.6 {{ property_prefix("-o") }}
12.5 #
3.0 {{ property_prefix("-webkit") }}
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base 2.1 {{ property_prefix("-webkit") }} {{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}
{{ CompatGeckoMobile("16.0") }}
{{ CompatUnknown() }} 10.0 {{ property_prefix("-o") }}
12.5 #
3.2 {{ property_prefix("-webkit") }}

Voir également

Source de la révision

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété CSS <code>transition-delay</code> spécifie la quantité de temps à attendre entre un changement demandé sur une propriété qui doit subir une transition et le début de l'<a href="/fr/CSS/Transitions_CSS" title="en/CSS/CSS transitions">effet de transition</a>.</p>
<p>Une valeur de <code>0s</code>, ou <code>0ms</code>, indique que la propriété devra débuter sa transition dès que sa valeur change ; les valeurs positives retardent le début de la transition de la valeur spécifiée. Les valeurs négatives donnentt l'impression que l'animation apparaît en cours d'effet.</p>
<p>Vous pouvez aussi spécifier des délais multiples ; chaque délai sera appliqué à la propriété correspondante comme spécifié par la propriété {{ cssxref("transition-property") }}, qui agit comme liste maîtresse. S'il y a moins de délais spécifiés que dans la liste maîtresse, les valeurs manquantes sont fixées à la valeur initiale (<code>0s</code>). S'il y a plus de délais, la liste est simplement coupé à la bonne taille. Dans les deux cas, la déclaration CSS reste valide.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> <code>0s</code></li>
  <li><dfn>S'applique à </dfn>tous les éléments, pseudo-éléments {{ cssxref("::before") }} et {{ cssxref("::after") }}</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> non</li>
  <li><dfn>Média </dfn> {{ Xref_cssinteractive() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> comme spécifiée</li>
  <li><dfn>{{ Xref_cssanimatable() }}</dfn> non</li>
  <li><dfn>{{ Xref_csscanonicalorder() }}</dfn> l'ordre unique et non ambigu défini par la grammaire formelle</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="twopartsyntaxbox">
Grammaire formelle : {{ xref_csstime() }} [, {{ xref_csstime() }}]*
</pre>
<pre>
transition-delay: 3s
transition-delay: 2s, 4ms
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
  <dt>
    <code>&lt;time&gt;</code></dt>
  <dd>
    Est un {{ xref_csstime() }} décrivant la quantité de temps à attendre entre le changement de valeur de la propriété et le début de la transition.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<p>Il y a de nombreux exemples de transitions CSS inclues dans l'article <a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">Transitions CSS</a>.</p>
<h2 id="Sp.C3.A9cifications">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-delay', 'transition-delay') }}</td>
      <td>{{ Spec2('CSS3 Transitions') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>1.0 {{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}<br />
          {{ CompatGeckoDesktop("16.0") }}</td>
        <td>10.0</td>
        <td>11.6 {{ property_prefix("-o") }}<br />
          12.5 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
        <td>3.0 {{ property_prefix("-webkit") }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>2.1 {{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}<br />
          {{ CompatGeckoMobile("16.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>10.0 {{ property_prefix("-o") }}<br />
          12.5 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
        <td>3.2 {{ property_prefix("-webkit") }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Using CSS transitions</a></li>
  <li>{{ domxref("TransitionEvent") }}</li>
  <li>{{ CSS_Reference:transitions() }}</li>
</ul>
Revenir à cette révision