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/transition-timing-function/index.html | 278 --------------------- .../fr/web/css/transition-timing-function/index.md | 278 +++++++++++++++++++++ 2 files changed, 278 insertions(+), 278 deletions(-) delete mode 100644 files/fr/web/css/transition-timing-function/index.html create mode 100644 files/fr/web/css/transition-timing-function/index.md (limited to 'files/fr/web/css/transition-timing-function') diff --git a/files/fr/web/css/transition-timing-function/index.html b/files/fr/web/css/transition-timing-function/index.html deleted file mode 100644 index 6581f0d272..0000000000 --- a/files/fr/web/css/transition-timing-function/index.html +++ /dev/null @@ -1,278 +0,0 @@ ---- -title: transition-timing-function -slug: Web/CSS/transition-timing-function -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/transition-timing-function ---- -
{{CSSRef}}
- -

La propriété transition-timing-function décrit la façon dont les valeurs intermédiaires des propriétés CSS affectées par un effet de transition sont calculées. Ceci permet donc de définir une courbe d'accelération, de manière à ce que la vitesse de la transition varie au cours de sa durée.

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

Cette courbe d'accelération est définie en utilisant une {{cssxref("<timing-function>")}} pour chacune des propriétés à animer.

- -

Il est possible de définir plusieurs fonctions de temporisation dans une même déclaration ; chacune sera appliquée à la propriété correspondante listée avec la propriété {{cssxref("transition-property")}}, qui agit comme liste maîtresse :

- - - -

Dans les deux cas, la déclaration CSS reste valide.

- -

Syntaxe

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

Valeurs

- -
-
<timing-function>
-
Chaque valeur {{cssxref("<timing-function>")}} représente une fonction temporelle à rattacher à chaque propriété de la transition définies grâce à {{cssxref("transition-property")}}. -

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 la transition 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 la transition augmente au milieu de celle-ci puis ralentit à la fin.
-
linear
-
Correspond à cubic-bezier(0.0, 0.0, 1.0, 1.0) : la transition s'effectue à vitesse constante.
-
ease-in
-
Correspond à cubic-bezier(0.42, 0, 1.0, 1.0) : la transition commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.
-
ease-out
-
Correspond à cubic-bezier(0, 0, 0.58, 1.0) : la transition commence rapidement puis ralentit jusqu'à la fin.
-
ease-in-out
-
Correspond à cubic-bezier(0.42, 0, 0.58, 1.0) : la transition 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>)
-
La transition s'effectue selon n étapes de durées égales. Ainsi, si n vaut 5, la transition 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 la transition.
-
jump-end
-
La fonction est continue à droite et le dernier saut se produit à la fin de la transition.
-
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 la transition.
-
start
-
Identique à jump-start.
-
end
-
Identique à jump-end.
-
-
-
step-start
-
Synonyme de steps(1, jump-start)
-
step-end
-
Synonyme de steps(1, jump-end)
-
-
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
-

Courbes de Bézier cubiques

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

Fonctions en créneaux

- - - - - - - -
.jump-start {
-   transition-timing-function: steps(5, jump-start);
-}
-.jump-end {
-   transition-timing-function: steps(5, jump-end);
-}
-.jump-none {
-   transition-timing-function: steps(5, jump-none);
-}
-.jump-both {
-   transition-timing-function: steps(5, jump-both);
-}
-.step-start {
-   transition-timing-function: step-start;
-}
-.step-end {
-   transition-timing-function: step-end;
-}
- -
{{EmbedLiveSample("Fonctions_en_créneaux")}}
-
- -

Accessibilité

- -

Certaines animations permettent de guider les utilisateurs vers les actions possibles et utiles, d'illustrer les relations qui existent entre les éléments d'interface et d'informer les utilisateurs quant aux actions qui se sont produites. Les animations réduisent ainsi la charge cognitive et améliorent la perception du changement.

- -

Toutefois, certaines animations s'avèrent problématiques pour les personnes souffrant de troubles cognitifs, d'épilepsie ou autre. Pour cela, on prévoira d'intégrer un mécanisme qui permette de suspendre ou de désactiver l'animation. De même, on pourra tirer parti de la requête média sur la réduction de mouvements afin de créer une expérience complémentaire pour les personnes ayant exprimé leur souhait d'absence d'animation.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat/th>Commentaires
{{SpecName('CSS3 Transitions', '#transition-timing-function-property', 'transition-timing-function')}}{{Spec2('CSS3 Transitions')}}Définition initiale
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

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

La propriété transition-timing-function décrit la façon dont les valeurs intermédiaires des propriétés CSS affectées par un effet de transition sont calculées. Ceci permet donc de définir une courbe d'accelération, de manière à ce que la vitesse de la transition varie au cours de sa durée.

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

Cette courbe d'accelération est définie en utilisant une {{cssxref("<timing-function>")}} pour chacune des propriétés à animer.

+ +

Il est possible de définir plusieurs fonctions de temporisation dans une même déclaration ; chacune sera appliquée à la propriété correspondante listée avec la propriété {{cssxref("transition-property")}}, qui agit comme liste maîtresse :

+ + + +

Dans les deux cas, la déclaration CSS reste valide.

+ +

Syntaxe

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

Valeurs

+ +
+
<timing-function>
+
Chaque valeur {{cssxref("<timing-function>")}} représente une fonction temporelle à rattacher à chaque propriété de la transition définies grâce à {{cssxref("transition-property")}}. +

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 la transition 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 la transition augmente au milieu de celle-ci puis ralentit à la fin.
+
linear
+
Correspond à cubic-bezier(0.0, 0.0, 1.0, 1.0) : la transition s'effectue à vitesse constante.
+
ease-in
+
Correspond à cubic-bezier(0.42, 0, 1.0, 1.0) : la transition commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.
+
ease-out
+
Correspond à cubic-bezier(0, 0, 0.58, 1.0) : la transition commence rapidement puis ralentit jusqu'à la fin.
+
ease-in-out
+
Correspond à cubic-bezier(0.42, 0, 0.58, 1.0) : la transition 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>)
+
La transition s'effectue selon n étapes de durées égales. Ainsi, si n vaut 5, la transition 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 la transition.
+
jump-end
+
La fonction est continue à droite et le dernier saut se produit à la fin de la transition.
+
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 la transition.
+
start
+
Identique à jump-start.
+
end
+
Identique à jump-end.
+
+
+
step-start
+
Synonyme de steps(1, jump-start)
+
step-end
+
Synonyme de steps(1, jump-end)
+
+
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
+

Courbes de Bézier cubiques

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

Fonctions en créneaux

+ + + + + + + +
.jump-start {
+   transition-timing-function: steps(5, jump-start);
+}
+.jump-end {
+   transition-timing-function: steps(5, jump-end);
+}
+.jump-none {
+   transition-timing-function: steps(5, jump-none);
+}
+.jump-both {
+   transition-timing-function: steps(5, jump-both);
+}
+.step-start {
+   transition-timing-function: step-start;
+}
+.step-end {
+   transition-timing-function: step-end;
+}
+ +
{{EmbedLiveSample("Fonctions_en_créneaux")}}
+
+ +

Accessibilité

+ +

Certaines animations permettent de guider les utilisateurs vers les actions possibles et utiles, d'illustrer les relations qui existent entre les éléments d'interface et d'informer les utilisateurs quant aux actions qui se sont produites. Les animations réduisent ainsi la charge cognitive et améliorent la perception du changement.

+ +

Toutefois, certaines animations s'avèrent problématiques pour les personnes souffrant de troubles cognitifs, d'épilepsie ou autre. Pour cela, on prévoira d'intégrer un mécanisme qui permette de suspendre ou de désactiver l'animation. De même, on pourra tirer parti de la requête média sur la réduction de mouvements afin de créer une expérience complémentaire pour les personnes ayant exprimé leur souhait d'absence d'animation.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat/th>Commentaires
{{SpecName('CSS3 Transitions', '#transition-timing-function-property', 'transition-timing-function')}}{{Spec2('CSS3 Transitions')}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

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