From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- .../web/css/animation-timing-function/index.html | 264 --------------------- .../fr/web/css/animation-timing-function/index.md | 264 +++++++++++++++++++++ 2 files changed, 264 insertions(+), 264 deletions(-) delete mode 100644 files/fr/web/css/animation-timing-function/index.html create mode 100644 files/fr/web/css/animation-timing-function/index.md (limited to 'files/fr/web/css/animation-timing-function') diff --git a/files/fr/web/css/animation-timing-function/index.html b/files/fr/web/css/animation-timing-function/index.html deleted file mode 100644 index f3b7858272..0000000000 --- a/files/fr/web/css/animation-timing-function/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: animation-timing-function -slug: Web/CSS/animation-timing-function -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/animation-timing-function ---- -
{{CSSRef}}
- -

La propriété animation-timing-function 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")}}.

- -
{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}
- -

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.

- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-animation-timing-function: ease;
-animation-timing-function: ease-in;
-animation-timing-function: ease-out;
-animation-timing-function: ease-in-out;
-animation-timing-function: linear;
-animation-timing-function: step-start;
-animation-timing-function: step-end;
-
-/* Valeurs fonctionnelles */
-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
-animation-timing-function: steps(4, end);
-
-/* Valeurs avec une fonction en escalier */
-animation-timing-function: steps(4, jump-start);
-animation-timing-function: steps(10, jump-end);
-animation-timing-function: steps(20, jump-none);
-animation-timing-function: steps(5, jump-both);
-animation-timing-function: steps(6, start);
-animation-timing-function: steps(8, end);
-
-/* Définition de temporisations pour plusieurs animations */
-animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
-
-/* Valeurs globales */
-animation-timing-function: inherit;
-animation-timing-function: initial;
-animation-timing-function: unset;
-
- -

Pour les animations cadencées (keyframed), la fonction s'applique entre chaque étape (ou keyframes) plutôt que sur l'animation dans son ensemble. Autrement dit, la fonction de timing est appliquée au début et à la fin de l'étape de l'animation.

- -

Une fonction de progression pour une animation qui est définie pour une étape sera appliquée à cette étape en particulier. Si aucune fonction n'est définie pour l'étape, ce sera la fonction de progression de toute l'animation qui sera utilisée.

- -

Valeurs

- -
-
<timing-function>
-
Chaque valeur {{cssxref("easing-function")}} représente une fonction temporelle à rattacher à une animation définie grâce à {{cssxref("animation-name")}}. -

Les valeurs avec des mots-clés (ease, linear, ease-in-out, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction cubic-bezier() permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser l'animation en intervalles de même durée.

- -
-
ease
-
Correspond à cubic-bezier(0.25, 0.1, 0.25, 1.0) : c'est la valeur par défaut, la vitesse de l'animation augmente au milieu de celle-ci puis ralentit à la fin.
-
linear
-
Correspond à cubic-bezier(0.0, 0.0, 1.0, 1.0) : l'animation s'effectue à vitesse constante.
-
ease-in
-
Correspond à cubic-bezier(0.42, 0, 1.0, 1.0) : l'animation commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.
-
ease-out
-
Correspond à cubic-bezier(0, 0, 0.58, 1.0) : l'animation commence rapidement puis ralentit jusqu'à la fin.
-
ease-in-out
-
Correspond à cubic-bezier(0.42, 0, 0.58, 1.0) : l'animation commence lentement, accèlere puis ralentit à nouveau avant la fin.
-
cubic-bezier(p1, p2, p3, p4)
-
Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.
-
steps( n, <jumpterm>)
-
L'animation s'effectue selon n étapes de durées égales. Ainsi, si n vaut 5, l'animation se composera de cinq paliers. Selon la valeur du paramètre jumpterm, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) : -
-
jump-start
-
La fonction est continue à gauche et le premier saut se produit au début de l'animation.
-
jump-end
-
La fonction est continue à droite et le dernier saut se produit à la fin de l'animation.
-
jump-none
-
Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).
-
jump-both
-
Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant l'animation.
-
start
-
Identique à jump-start.
-
end
-
Identique à jump-end.
-
-
-
step-start
-
Synonyme de steps(1, jump-start)
-
step-end
-
Synonyme de steps(1, jump-end)
-
-
-
- -
-

Note : Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété animation-*, 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 Paramétrer plusieurs valeurs de propriétés pour les animations.

-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
-

Courbes de Bézier cubiques

- - - - - -
.ease {
-   animation-timing-function: ease;
-}
-.easein {
-   animation-timing-function: ease-in;
-}
-.easeout {
-   animation-timing-function: ease-out;
-}
-.easeinout {
-   animation-timing-function: ease-in-out;
-}
-.linear {
-   animation-timing-function: linear;
-}
-.cb {
-   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
-}
- -
{{EmbedLiveSample("Courbes_de_Bézier_cubiques")}}
-
- -
-

Fonctions en escalier

- - - - - -
.jump-start {
-   animation-timing-function: steps(5, jump-start);
-}
-.jump-end {
-   animation-timing-function: steps(5, jump-end);
-}
-.jump-none {
-   animation-timing-function: steps(5, jump-none);
-}
-.jump-both {
-   animation-timing-function: steps(5, jump-both);
-}
-.start {
-   animation-timing-function: steps(5, start);
-}
-.end {
-   animation-timing-function: steps(5, end);
-}
-.step-start {
-   animation-timing-function: step-start;
-}
-.step-end {
-   animation-timing-function: step-end;
-}
- -
{{EmbedLiveSample("Fonctions_en_escalier")}}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}{{Spec2('CSS3 Animations')}}Définition initiale..
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.animation-timing-function")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/animation-timing-function/index.md b/files/fr/web/css/animation-timing-function/index.md new file mode 100644 index 0000000000..f3b7858272 --- /dev/null +++ b/files/fr/web/css/animation-timing-function/index.md @@ -0,0 +1,264 @@ +--- +title: animation-timing-function +slug: Web/CSS/animation-timing-function +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/animation-timing-function +--- +
{{CSSRef}}
+ +

La propriété animation-timing-function 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")}}.

+ +
{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}
+ +

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.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* Valeurs fonctionnelles */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* Valeurs avec une fonction en escalier */
+animation-timing-function: steps(4, jump-start);
+animation-timing-function: steps(10, jump-end);
+animation-timing-function: steps(20, jump-none);
+animation-timing-function: steps(5, jump-both);
+animation-timing-function: steps(6, start);
+animation-timing-function: steps(8, end);
+
+/* Définition de temporisations pour plusieurs animations */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Valeurs globales */
+animation-timing-function: inherit;
+animation-timing-function: initial;
+animation-timing-function: unset;
+
+ +

Pour les animations cadencées (keyframed), la fonction s'applique entre chaque étape (ou keyframes) plutôt que sur l'animation dans son ensemble. Autrement dit, la fonction de timing est appliquée au début et à la fin de l'étape de l'animation.

+ +

Une fonction de progression pour une animation qui est définie pour une étape sera appliquée à cette étape en particulier. Si aucune fonction n'est définie pour l'étape, ce sera la fonction de progression de toute l'animation qui sera utilisée.

+ +

Valeurs

+ +
+
<timing-function>
+
Chaque valeur {{cssxref("easing-function")}} représente une fonction temporelle à rattacher à une animation définie grâce à {{cssxref("animation-name")}}. +

Les valeurs avec des mots-clés (ease, linear, ease-in-out, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction cubic-bezier() permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser l'animation en intervalles de même durée.

+ +
+
ease
+
Correspond à cubic-bezier(0.25, 0.1, 0.25, 1.0) : c'est la valeur par défaut, la vitesse de l'animation augmente au milieu de celle-ci puis ralentit à la fin.
+
linear
+
Correspond à cubic-bezier(0.0, 0.0, 1.0, 1.0) : l'animation s'effectue à vitesse constante.
+
ease-in
+
Correspond à cubic-bezier(0.42, 0, 1.0, 1.0) : l'animation commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.
+
ease-out
+
Correspond à cubic-bezier(0, 0, 0.58, 1.0) : l'animation commence rapidement puis ralentit jusqu'à la fin.
+
ease-in-out
+
Correspond à cubic-bezier(0.42, 0, 0.58, 1.0) : l'animation commence lentement, accèlere puis ralentit à nouveau avant la fin.
+
cubic-bezier(p1, p2, p3, p4)
+
Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.
+
steps( n, <jumpterm>)
+
L'animation s'effectue selon n étapes de durées égales. Ainsi, si n vaut 5, l'animation se composera de cinq paliers. Selon la valeur du paramètre jumpterm, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) : +
+
jump-start
+
La fonction est continue à gauche et le premier saut se produit au début de l'animation.
+
jump-end
+
La fonction est continue à droite et le dernier saut se produit à la fin de l'animation.
+
jump-none
+
Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).
+
jump-both
+
Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant l'animation.
+
start
+
Identique à jump-start.
+
end
+
Identique à jump-end.
+
+
+
step-start
+
Synonyme de steps(1, jump-start)
+
step-end
+
Synonyme de steps(1, jump-end)
+
+
+
+ +
+

Note : Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété animation-*, 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 Paramétrer plusieurs valeurs de propriétés pour les animations.

+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
+

Courbes de Bézier cubiques

+ + + + + +
.ease {
+   animation-timing-function: ease;
+}
+.easein {
+   animation-timing-function: ease-in;
+}
+.easeout {
+   animation-timing-function: ease-out;
+}
+.easeinout {
+   animation-timing-function: ease-in-out;
+}
+.linear {
+   animation-timing-function: linear;
+}
+.cb {
+   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
+}
+ +
{{EmbedLiveSample("Courbes_de_Bézier_cubiques")}}
+
+ +
+

Fonctions en escalier

+ + + + + +
.jump-start {
+   animation-timing-function: steps(5, jump-start);
+}
+.jump-end {
+   animation-timing-function: steps(5, jump-end);
+}
+.jump-none {
+   animation-timing-function: steps(5, jump-none);
+}
+.jump-both {
+   animation-timing-function: steps(5, jump-both);
+}
+.start {
+   animation-timing-function: steps(5, start);
+}
+.end {
+   animation-timing-function: steps(5, end);
+}
+.step-start {
+   animation-timing-function: step-start;
+}
+.step-end {
+   animation-timing-function: step-end;
+}
+ +
{{EmbedLiveSample("Fonctions_en_escalier")}}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}{{Spec2('CSS3 Animations')}}Définition initiale..
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.animation-timing-function")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf