jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Generateur de transitions discretes

Générez du CSS pour animer les elements qui apparaissent ou disparaissent.

Chargement de l'outil...

Qu'est-ce que Generateur de transitions discretes ?

CSS ne peut traditionnellement pas transitionner entre display: none et display: block. La propriete transition-behavior: allow-discrete et la regle @starting-style permettent désormais des transitions fluides pour les elements qui apparaissent et disparaissent. C'est essentiel pour les dialogues, popovers, infobulles et panneaux de divulgation.

Réponse rapide

Les transitions discretes permettent les transitions CSS pour display:none et d'autres proprietes discretes lorsqu'un element entre ou sort du DOM. Utilisez @starting-style pour definir l'etat initial avant que l'element n'apparaisse.

Last updated: 2026-05-25

Limites

  • Les transitions discretes pour display necessitent Chrome 117+ ou Safari 17.5+. La prise en charge de Firefox est derriere un drapeau debut 2026.
  • @starting-style est requis pour l'animation d'entree. Sans lui, l'element passe directement a son etat final avant de commencer la transition.
  • Les transitions discretes n'animent que l'entree et la sortie ou display change. Les transitions entre valeurs intermediaires ne sont pas prises en charge pour les proprietes discretes.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Choisissez le type d'element que vous souhaitez animer : dialogue, popover ou panneau de divulgation.
  2. Definissez les proprietes d'animation d'entree et de sortie comme opacity et transform.
  3. L'outil genere le @starting-style et le CSS de transition.
  4. Copiez le CSS et appliquez-le a votre element dialog, popover ou details.

A quoi il sert

  • Ajouter un effet d'apparition en fondu a un dialogue modal lorsqu'il s'ouvre.
  • Creer une animation de glissement vers le bas pour les panneaux de divulgation.
  • Construire des animations d'entree et de sortie fluides pour les popovers.

Cas d'usage

Exemples concrets

Exemple

Animation d'apparition en fondu d'un dialogue

Un dialogue apparaît en fondu avec opacity et s'agrandit de 0.9 a 1 en utilisant @starting-style. A la fermeture, il disparaît en fondu en utilisant la meme transition.

Exemple

Transition de glissement d'un popover

Un popover glisse depuis le haut avec une transition fluide et disparaît en fondu a la fermeture, en utilisant overlay et transition-behavior: allow-discrete.

Erreurs frequentes

  • Oublier d'ajouter transition-behavior: allow-discrete a l'element en transition.
  • Ne pas tenir compte de la propriete overlay dans les transitions de dialogue et popover.
  • Creer des animations trop lentes qui frustrent les utilisateurs.

Vérification

  1. Testez les transitions d'entree et de sortie dans Chrome ou Safari et verifiez que l'animation se joue dans les deux sens.
  2. Verifiez dans la console du navigateur les avertissements de transition CSS lies aux proprietes discretes.

FAQ

Questions sur Generateur de transitions discretes

Que fait transition-behavior: allow-discrete ?

Il active les transitions pour les proprietes qui ne peuvent normalement pas etre transitionnees, comme display et overlay.

Ai-je besoin de @starting-style ?

Oui. Il definit l'etat initial de l'element avant qu'il n'apparaisse, comme opacity: 0 ou des valeurs transform. Sans lui, l'element apparaît d'abord dans son etat final.

Quelles proprietes CSS sont normalement discretes et ne peuvent pas etre transitionnees ?

Display, overlay, content-visibility et la transition mix-blend-mode vers initial sont des exemples de proprietes discretes. La regle transition-behavior: allow-discrete indique au navigateur d'attendre la fin de la duree de transition avant de changer d'etat.

Puis-je transitionner entre display: none et display: block ?

Oui, avec transition-behavior: allow-discrete et @starting-style. L'element disparaît en fondu avant que display: none soit applique, ou apparaît en fondu apres que display: block soit defini.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi