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

La propriété transition est une propriété raccourcie pour les propriétés {{cssxref("transition-property")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-timing-function")}} et {{cssxref("transition-delay")}}.

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

Elle permet de définir la transition entre deux états d'un élément. Les différents états peuvent être définis à l'aide de pseudo-classes telles que {{cssxref(":hover")}} ou {{cssxref(":active")}} ou être définis dynamiquement avec JavaScript.

- -

Syntaxe

- -
/* S'applique à une propriété */
-/* on a le nom et la durée */
-transition: margin-right 4s;
-
-/* nom de la propriété | durée | retard */
-transition: margin-right 4s 1s;
-
-/* nom | durée | fonction */
-transition: margin-right 4s ease-in-out;
-
-/* nom | durée | fonction | retard */
-transition: margin-right 4s ease-in-out 1s;
-
-/* S'applique à deux propriétés */
-transition: margin-right 4s, color 1s;
-
-/* S'applique à toutes les propriétés modifiées */
-transition: all 0.5s ease-out;
-
-/* Valeurs globales */
-transition: inherit;
-transition: initial;
-transition: unset;
-
- -

La propriété transition se définit comme une ou plusieurs propriétés de transitions, séparées par des virgules.

- -

Chacune des propriétés de transition décrit la transition qui devrait être appliquée à une propriété donnée (ou pour les valeurs spéciales all et none). Une propriété de transition inclut :

- - - -

Si la liste des valeurs est trop courte pour les différentes propriétés, les valeurs seront répétées. Si la liste est trop longue, elle sera tronquée.

- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Plusieurs exemples de transitions CSS sont présentés sur l'article sur les transitions CSS.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition')}}{{Spec2('CSS3 Transitions')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.transition")}}

- -

Voir aussi

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

La propriété transition est une propriété raccourcie pour les propriétés {{cssxref("transition-property")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-timing-function")}} et {{cssxref("transition-delay")}}.

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

Elle permet de définir la transition entre deux états d'un élément. Les différents états peuvent être définis à l'aide de pseudo-classes telles que {{cssxref(":hover")}} ou {{cssxref(":active")}} ou être définis dynamiquement avec JavaScript.

+ +

Syntaxe

+ +
/* S'applique à une propriété */
+/* on a le nom et la durée */
+transition: margin-right 4s;
+
+/* nom de la propriété | durée | retard */
+transition: margin-right 4s 1s;
+
+/* nom | durée | fonction */
+transition: margin-right 4s ease-in-out;
+
+/* nom | durée | fonction | retard */
+transition: margin-right 4s ease-in-out 1s;
+
+/* S'applique à deux propriétés */
+transition: margin-right 4s, color 1s;
+
+/* S'applique à toutes les propriétés modifiées */
+transition: all 0.5s ease-out;
+
+/* Valeurs globales */
+transition: inherit;
+transition: initial;
+transition: unset;
+
+ +

La propriété transition se définit comme une ou plusieurs propriétés de transitions, séparées par des virgules.

+ +

Chacune des propriétés de transition décrit la transition qui devrait être appliquée à une propriété donnée (ou pour les valeurs spéciales all et none). Une propriété de transition inclut :

+ + + +

Si la liste des valeurs est trop courte pour les différentes propriétés, les valeurs seront répétées. Si la liste est trop longue, elle sera tronquée.

+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Plusieurs exemples de transitions CSS sont présentés sur l'article sur les transitions CSS.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition')}}{{Spec2('CSS3 Transitions')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.transition")}}

+ +

Voir aussi

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