6XC

Générateur de transition CSS

Construisez une transition — propriété, durée, fonction de temporisation et délai — et testez-la en direct en un clic.

910 vues

La propriété transition

Syntaxe : transition: propriété durée fonction-de-temporisation délai. Elle anime les changements déclenchés par le survol, le focus ou les bascules de classe. La fonction de temporisation définit la sensation : ease est la valeur par défaut naturelle, ease-out convient aux entrées, et des courbes cubic-bezier personnalisées créent des dépassements élastiques. Appuyez sur le bouton de test pour voir vos réglages en action.

Questions fréquentes

Quelles propriétés sont peu coûteuses à animer ?

transform et opacity — le navigateur peut les composer sur le GPU sans recalculer la mise en page. Animer width, height ou top force une mise en page à chaque image et peut saccader.

Quelle est une bonne durée par défaut ?

150-250 ms pour un petit retour d'interface (boutons, survols) et 300-500 ms pour des mouvements plus amples. Au-delà de ~700 ms, les interfaces commencent à sembler lentes.

Outils similaires

Générateur de dégradé CSS Concevez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct et copiez le code. Lancer Générateur d'ombre CSS (box-shadow) Concevez une box-shadow visuellement — décalages, flou, étalement, couleur, opacité et inset — avec aperçu en direct. Lancer Générateur de border-radius CSS Arrondissez chaque coin individuellement ou tous à la fois, en px ou %, avec aperçu en direct et CSS copiable. Lancer Générateur d'ombre de texte CSS Concevez un text-shadow avec décalages, flou, couleur et opacité — aperçu en direct sur un texte d'exemple. Lancer