diff options
Diffstat (limited to 'files/fr/web/css/@keyframes/index.md')
| -rw-r--r-- | files/fr/web/css/@keyframes/index.md | 169 |
1 files changed, 169 insertions, 0 deletions
diff --git a/files/fr/web/css/@keyframes/index.md b/files/fr/web/css/@keyframes/index.md new file mode 100644 index 0000000000..9856d8f815 --- /dev/null +++ b/files/fr/web/css/@keyframes/index.md @@ -0,0 +1,169 @@ +--- +title: '@keyframes' +slug: Web/CSS/@keyframes +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/@keyframes +--- +<div>{{CSSRef}}</div> + +<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> + +<pre class="brush: css no-line-numbers">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + 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> + +<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> + +<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> + +<h3 id="Validité_de_la_liste_des_étapes">Validité de la liste des étapes</h3> + +<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> + +<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> + +<h3 id="Résolution_des_doublons">Résolution des doublons</h3> + +<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> + +<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> + +<h3 id="Gestion_des_propriétés_absentes">Gestion des propriétés absentes</h3> + +<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> + +<pre class="brush: 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> + +<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> + +<h3 id="!important_dans_une_étape"><code>!important</code> dans une étape</h3> + +<p>Les déclarations qui utilisent <code>!important</code> dans une description d'étape sont ignorées</p> + +<pre class="brush: css">@keyframes important1 { + from { margin-top: 50px; } + 50% { margin-top: 150px !important; } /* ignorée */ + to { margin-top: 100px; } +} + +@keyframes important2 { + from { margin-top: 50px; + margin-bottom: 100px; } + to { margin-top: 150px !important; /* ignorée */ + margin-bottom: 50px; } +} +</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<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> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +{{csssyntax}} + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + animation-duration: 25s; + animation-name: slidein; +} + +@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + 75% { + font-size: 300%; + margin-left: 25%; + width: 150%; + } + + to { + margin-left: 0%; + width: 100%; + } +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","500","300")}}</p> + +<h3 id="Plus_dexemples">Plus d'exemples ?</h3> + +<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> + +<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 Animations', '#keyframes', '@keyframes')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("css.at-rules.keyframes")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> |