diff options
Diffstat (limited to 'files/fr/web/css/@keyframes/index.md')
| -rw-r--r-- | files/fr/web/css/@keyframes/index.md | 133 |
1 files changed, 62 insertions, 71 deletions
diff --git a/files/fr/web/css/@keyframes/index.md b/files/fr/web/css/@keyframes/index.md index 9856d8f815..a2a57a15d6 100644 --- a/files/fr/web/css/@keyframes/index.md +++ b/files/fr/web/css/@keyframes/index.md @@ -7,11 +7,12 @@ tags: - Règle @ translation_of: Web/CSS/@keyframes --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle </a><strong><code>@keyframes</code></strong> permet aux auteurs de définir les étapes qui composent la séquence d'une animation CSS. Cela permet de contrôler une animation plus finement que ce qu'on pourrait obtenir avec <a href="/fr/docs/Web/CSS/CSS_Transitions">les transitions</a>.</p> +La [règle ](/fr/docs/Web/CSS/R%C3%A8gles_@)**`@keyframes`** permet aux auteurs de définir les étapes qui composent la séquence d'une animation CSS. Cela permet de contrôler une animation plus finement que ce qu'on pourrait obtenir avec [les transitions](/fr/docs/Web/CSS/CSS_Transitions). -<pre class="brush: css no-line-numbers">@keyframes slidein { +```css +@keyframes slidein { from { margin-left: 100%; width: 300%; @@ -21,47 +22,50 @@ translation_of: Web/CSS/@keyframes margin-left: 0%; width: 100%; } -}</pre> +} +``` -<p>Il est possible de manipuler la règle @ <code>@keyframes</code> via JavaScript et le CSSOM, notamment avec l'interface {{domxref("CSSKeyframesRule")}}.</p> +Il est possible de manipuler la règle @ `@keyframes` via JavaScript et le CSSOM, notamment avec l'interface {{domxref("CSSKeyframesRule")}}. -<p>Afin d'utiliser ces règles, on créera une règle <code>@keyframes</code> avec un nom pour chaque étape et on utilisera ce nom avec la propriété {{cssxref("animation-name")}} afin qu'une animation corresponde à la liste des étapes qui la composent. Chaque règle <code>@keyframes</code> contient une liste de sélecteurs d'étapes dont chacun contient le pourcentage d'avancement de l'animation auquel il correspond ainsi que les informations de styles qui correspondent à cette étape..</p> +Afin d'utiliser ces règles, on créera une règle `@keyframes` avec un nom pour chaque étape et on utilisera ce nom avec la propriété {{cssxref("animation-name")}} afin qu'une animation corresponde à la liste des étapes qui la composent. Chaque règle `@keyframes` contient une liste de sélecteurs d'étapes dont chacun contient le pourcentage d'avancement de l'animation auquel il correspond ainsi que les informations de styles qui correspondent à cette étape.. -<p>Les étapes peuvent être listées dans n'importe quel ordre. Elles seront enchaînées dans l'ordre indiqué par le pourcentage d'avancement.</p> +Les étapes peuvent être listées dans n'importe quel ordre. Elles seront enchaînées dans l'ordre indiqué par le pourcentage d'avancement. -<h3 id="Validité_de_la_liste_des_étapes">Validité de la liste des étapes</h3> +### Validité de la liste des étapes -<p>Si une liste d'étapes ne spécifie pas le début (<code>0%</code>/<code>from</code>) ou la fin (<code>100%</code>/<code>to</code>) d'une animation, le navigateur va utiliser les styles de l'élement définis par ailleurs. C'est assez pratique pour animer un élément depuis et vers son état initial.</p> +Si une liste d'étapes ne spécifie pas le début (`0%`/`from`) ou la fin (`100%`/`to`) d'une animation, le navigateur va utiliser les styles de l'élement définis par ailleurs. C'est assez pratique pour animer un élément depuis et vers son état initial. -<p>Si les étapes décrivent des propriétés qui ne peuvent pas être animées, elles seront ignorées mais les autres propriétés seront bien animées.</p> +Si les étapes décrivent des propriétés qui ne peuvent pas être animées, elles seront ignorées mais les autres propriétés seront bien animées. -<h3 id="Résolution_des_doublons">Résolution des doublons</h3> +### Résolution des doublons -<p>Si plusieurs règles <code>@keyframes</code> existent avec le même nom, c'est la dernière qui est utilisée. Les règles <code>@keyframes</code> ne forment pas de cascade et il n'y a donc pas de dérivation entre les différentes règles qui porteraient le même nom.</p> +Si plusieurs règles `@keyframes` existent avec le même nom, c'est la dernière qui est utilisée. Les règles `@keyframes` ne forment pas de cascade et il n'y a donc pas de dérivation entre les différentes règles qui porteraient le même nom. -<p>Si, au sein d'une même règle, deux étapes décrivent le même pourcentage d'avancement, c'est la dernière qui est utilisée pour décrire ce moment de l'animation. Il n'y a aucune cascade qui composerait différentes étapes décrivant le même avancement.</p> +Si, au sein d'une même règle, deux étapes décrivent le même pourcentage d'avancement, c'est la dernière qui est utilisée pour décrire ce moment de l'animation. Il n'y a aucune cascade qui composerait différentes étapes décrivant le même avancement. -<h3 id="Gestion_des_propriétés_absentes">Gestion des propriétés absentes</h3> +### Gestion des propriétés absentes -<p>Si des propriétés ne sont pas définies à chaque étape, elles sont interpolées si possible. Si ces propriétés ne peuvent pas être interpolées, elles sont retirées de l'animation :</p> +Si des propriétés ne sont pas définies à chaque étape, elles sont interpolées si possible. Si ces propriétés ne peuvent pas être interpolées, elles sont retirées de l'animation : -<pre class="brush: css">@keyframes identifier { +```css +@keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } } -</pre> +``` -<p>Ici, la propriété {{cssxref("top")}} est animée en passant par les étapes <code>0%</code>, <code>30%</code> et <code>100%</code>. Quant à {{cssxref("left")}}, elle est animée aux étapes <code>0%</code>, <code>68%</code> , <code>72%</code> et <code>100%</code>.</p> +Ici, la propriété {{cssxref("top")}} est animée en passant par les étapes `0%`, `30%` et `100%`. Quant à {{cssxref("left")}}, elle est animée aux étapes `0%`, `68%` , `72%` et `100%`. -<p>Seules les propriétés qui sont définies sur les étapes de début (<code>0%</code>) et de fin (<code>100%</code>) seront animées. Toutes les propriétés qui ne sont pas incluses dans les descriptions de ces étapes conserveront leurs valeurs de départ au cours de l'animation.</p> +Seules les propriétés qui sont définies sur les étapes de début (`0%`) et de fin (`100%`) seront animées. Toutes les propriétés qui ne sont pas incluses dans les descriptions de ces étapes conserveront leurs valeurs de départ au cours de l'animation. -<h3 id="!important_dans_une_étape"><code>!important</code> dans une étape</h3> +### `!important` dans une étape -<p>Les déclarations qui utilisent <code>!important</code> dans une description d'étape sont ignorées</p> +Les déclarations qui utilisent `!important` dans une description d'étape sont ignorées -<pre class="brush: css">@keyframes important1 { +```css +@keyframes important1 { from { margin-top: 50px; } 50% { margin-top: 150px !important; } /* ignorée */ to { margin-top: 100px; } @@ -73,32 +77,31 @@ translation_of: Web/CSS/@keyframes to { margin-top: 150px !important; /* ignorée */ margin-bottom: 50px; } } -</pre> +``` -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<dl> - <dt><code><identifier></code></dt> - <dd>Un nom ({{cssxref("custom-ident")}}) qui permet d'identifier la liste d'étapes. Cela doit être <a href="/fr/docs/Web/CSS/custom-ident">un identifiant valide selon la syntaxe CSS</a>.</dd> - <dt><code>from</code></dt> - <dd>Indique le point de départ de l'animation (correspond à un avancement de <code>0%</code>).</dd> - <dt><code>to</code></dt> - <dd>Indique la fin de l'animation (correspond à un avancement de <code>100%</code>).</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>Le pourcentage d'avancement de l'animation auquel l'étape décrite s'applique.</dd> -</dl> +- `<identifier>` + - : Un nom ({{cssxref("custom-ident")}}) qui permet d'identifier la liste d'étapes. Cela doit être [un identifiant valide selon la syntaxe CSS](/fr/docs/Web/CSS/custom-ident). +- `from` + - : Indique le point de départ de l'animation (correspond à un avancement de `0%`). +- `to` + - : Indique la fin de l'animation (correspond à un avancement de `100%`). +- {{cssxref("<percentage>")}} + - : Le pourcentage d'avancement de l'animation auquel l'étape décrite s'applique. -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">p { +```css +p { animation-duration: 25s; animation-name: slidein; } @@ -118,52 +121,40 @@ translation_of: Web/CSS/@keyframes margin-left: 0%; width: 100%; } -}</pre> +} +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p> +```html +<p> Le Chat grimaça en apercevant Alice. Elle trouva qu’il avait l’air bon enfant, et cependant il avait de très longues griffes et une grande rangée de dents ; aussi comprit-elle qu’il fallait le traiter avec respect. -</p></pre> +</p> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemples","500","300")}}</p> +{{EmbedLiveSample("Exemples","500","300")}} -<h3 id="Plus_dexemples">Plus d'exemples ?</h3> +### Plus d'exemples ? -<p>Regardez <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Utiliser les animations CSS</a> pour de plus amples exemples.</p> +Regardez [Utiliser les animations CSS](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS) pour de plus amples exemples. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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 Animations', '#keyframes', '@keyframes')}}</td> - <td>{{Spec2('CSS3 Animations')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('CSS3 Animations', '#keyframes', '@keyframes')}} | {{Spec2('CSS3 Animations')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("css.at-rules.keyframes")}}</p> +{{Compat("css.at-rules.keyframes")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li> - <li>{{domxref("AnimationEvent")}}</li> -</ul> +- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS) +- {{domxref("AnimationEvent")}} |