Qu'est-ce que Generateur de transitions discretes ?
Generateur de transitions discretes est un outil dans le navigateur pour cette tâche : Générez du CSS pour animer les elements qui apparaissent ou disparaissent. La sortie reste lisible afin de la vérifier avant de l'utiliser sur un site publié.
Quick answer
Discrete transitions enable CSS transitions for display:none and other discrete properties when an element enters or leaves the DOM. Use @starting-style to define the initial state before the element appears.
Limitations
- Discrete transitions for display require Chrome 117+ or Safari 17.5+. Firefox support is behind a flag as of early 2026.
- @starting-style is required for the entry animation. Without it the element snaps into its final state before starting the transition.
- Discrete transitions only animate the entry and exit where display changes. Mid-state transitions between intermediate values are not supported for discrete properties.
Comment utiliser cet outil
- Ouvrez l'outil et saisissez les valeurs utiles.
- Vérifiez la sortie dans le panneau de résultat.
- Copiez seulement la partie adaptéeà votre page.
- Testez la modification avant publication.
A quoi il sert
- Gagner du temps sur les tâches de publication récurrentes.
- Préparer markup, CSS ou checklist avant lancement.
- Eviter les petites erreurs faciles a manquer sur un site statique.