From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/transition/index.md | 81 ++++++++++++++---------------------- 1 file changed, 32 insertions(+), 49 deletions(-) (limited to 'files/fr/web/css/transition') diff --git a/files/fr/web/css/transition/index.md b/files/fr/web/css/transition/index.md index 878ab25a78..4fffc00305 100644 --- a/files/fr/web/css/transition/index.md +++ b/files/fr/web/css/transition/index.md @@ -8,17 +8,18 @@ tags: - Transitions CSS translation_of: Web/CSS/transition --- -
{{CSSRef}}
+{{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")}}.

+La propriété **`transition`** est [une propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) pour les propriétés {{cssxref("transition-property")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-timing-function")}} et {{cssxref("transition-delay")}}. -
{{EmbedInteractiveExample("pages/css/transition.html")}}
+{{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.

+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](/fr/docs/Web/CSS/Pseudo-classes) telles que {{cssxref(":hover")}} ou {{cssxref(":active")}} ou être définis dynamiquement avec JavaScript. -

Syntaxe

+## Syntaxe -
/* S'applique à une propriété */
+```css
+/* S'applique à une propriété */
 /* on a le nom et la durée */
 transition: margin-right 4s;
 
@@ -41,62 +42,44 @@ transition: all 0.5s ease-out;
 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.

+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 :

+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 : - +- zéro ou une valeur qui représente la propriété à laquelle la transition s'applique. Ça peut être : -

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.

+ - le mot-clé `none` + - le mot-clé `all` + - Un identifiant ({{cssxref("<custom-ident>")}}) qui nomme une propriété CSS. -

Syntaxe formelle

+- zéro ou une valeur {{cssxref("<single-transition-timing-function>")}} qui représente la fonction de temporisation utilisée pour la transition +- zéro, une ou deux valeurs {{cssxref("<time>")}}. La première valeur qui peut être interprétée comme un temps sera affectée à la propriété {{cssxref("transition-duration")}} et la seconde valeur qui peut être affectée comme un temps sera affectée à la propriété {{cssxref("transition-delay")}}. + +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

+## Exemples -

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

+Plusieurs exemples de transitions CSS sont présentés [sur l'article sur les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions "en/CSS/CSS transitions"). -

Spécifications

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi - +- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions "en/CSS/CSS transitions") +- {{domxref("TransitionEvent")}} -- cgit v1.2.3-54-g00ecf