diff options
Diffstat (limited to 'files/fr/web/css/animation-timing-function/index.html')
| -rw-r--r-- | files/fr/web/css/animation-timing-function/index.html | 24 |
1 files changed, 9 insertions, 15 deletions
diff --git a/files/fr/web/css/animation-timing-function/index.html b/files/fr/web/css/animation-timing-function/index.html index 736ccbf5cd..f3b7858272 100644 --- a/files/fr/web/css/animation-timing-function/index.html +++ b/files/fr/web/css/animation-timing-function/index.html @@ -9,12 +9,10 @@ translation_of: Web/CSS/animation-timing-function --- <div>{{CSSRef}}</div> -<p>La propriété <code><strong>animation-timing-function</strong></code> définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. Cette propriété prendra comme valeurs une ou plusieurs fonctions {{cssxref("<timing-function>")}}.</p> +<p>La propriété <code><strong>animation-timing-function</strong></code> définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. Cette propriété prendra comme valeurs une ou plusieurs fonctions {{cssxref("easing-function")}}.</p> <div>{{EmbedInteractiveExample("pages/css/animation-timing-function.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> - <p>Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées à une animation.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -57,7 +55,7 @@ animation-timing-function: unset; <dl> <dt><code><timing-function></code></dt> - <dd>Chaque valeur {{cssxref("<timing-function>")}} représente une fonction temporelle à rattacher à une animation définie grâce à {{cssxref("animation-name")}}. + <dd>Chaque valeur {{cssxref("easing-function")}} représente une fonction temporelle à rattacher à une animation définie grâce à {{cssxref("animation-name")}}. <p>Les valeurs avec des mots-clés (<code>ease</code>, <code>linear</code>, <code>ease-in-out</code>, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction <code>cubic-bezier()</code> permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser l'animation en intervalles de même durée.</p> <dl> @@ -99,7 +97,7 @@ animation-timing-function: unset; </dl> <div class="note"> -<p><strong>Note </strong>: Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété <code>animation-*</code>, elles seront affectées selon leur ordre aux différentes animations listées par {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS#Utiliser_plusieurs_valeurs_pour_différentes_animations">Paramétrer plusieurs valeurs de propriétés pour les animations</a>.</p> +<p><strong>Note :</strong> Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété <code>animation-*</code>, elles seront affectées selon leur ordre aux différentes animations listées par {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir <a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#utiliser_plusieurs_valeurs_pour_diff%c3%a9rentes_animations">Paramétrer plusieurs valeurs de propriétés pour les animations</a>.</p> </div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -111,8 +109,7 @@ animation-timing-function: unset; <div> <h3 id="Courbes_de_Bézier_cubiques">Courbes de Bézier cubiques</h3> -<div class="hidden"> -<pre class="brush:html"><div class="parent"> +<pre class="brush:html hidden"><div class="parent"> <div class="ease">ease</div> <div class="easein">ease-in</div> <div class="easeout">ease-out</div> @@ -121,7 +118,7 @@ animation-timing-function: unset; <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div></pre> -<pre class="brush:css;">.parent > div[class] { +<pre class="brush:css hidden">.parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; @@ -144,7 +141,6 @@ animation-timing-function: unset; } } </pre> -</div> <pre class="brush: css">.ease { animation-timing-function: ease; @@ -171,8 +167,7 @@ animation-timing-function: unset; <div> <h3 id="Fonctions_en_escalier">Fonctions en escalier</h3> -<div class="hidden"> -<pre class="brush:html"><div class="parent"> +<pre class="brush:html hidden"><div class="parent"> <div class="jump-start">jump-start</div> <div class="jump-end">jump-end</div> <div class="jump-both">jump-both</div> @@ -183,7 +178,7 @@ animation-timing-function: unset; <div class="step-end">step-end</div> </div></pre> -<pre class="brush:css;">.parent > div[class] { +<pre class="brush:css hidden">.parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; @@ -206,7 +201,6 @@ animation-timing-function: unset; } } </pre> -</div> <pre class="brush: css">.jump-start { animation-timing-function: steps(5, jump-start); @@ -264,7 +258,7 @@ animation-timing-function: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS" title="CSS developer guide about CSS animations">Utiliser les animations CSS</a></li> - <li>{{cssxref('timing-function')}}</li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS developer guide about CSS animations">Utiliser les animations CSS</a></li> + <li>{{cssxref('easing-function')}}</li> <li>L'API JavaScript {{domxref("AnimationEvent")}}</li> </ul> |