CSS Transition Generator

Configure CSS transitions with hover preview.

Transition 1

propriete

duree

fonction-de-temps

delai

Apercu en direct — survolez la boite

Survolez-moi

CSS genere

.element {
  transition: all 0.3s ease 0s;
}

.element:hover {
  /* apply your hover styles here */
}

À propos de cet outil

Le Generateur de Transitions CSS configure la propriete raccourcie transition en definissant la propriete cible, la duree, la fonction de temps et le delai. L'apercu interactif montre le comportement avant de copier le code.

Les transitions CSS creent des changements d'etat fluides entre deux valeurs CSS, declenchees par des pseudo-classes comme :hover, :focus ou des changements de classe via JavaScript.

Comment utiliser

Selectionnez la propriete CSS a animer (ou utilisez all).
Definissez la duree — combien de temps dure la transition (ex: 0.3s).
Choisissez une fonction de temps pour controler la courbe d'acceleration.
Ajoutez optionnellement un delai avant le debut de la transition.
Survolez la boite de prevu pour voir l'effet en direct, puis copiez le CSS.

Cas d'utilisation

Les developpeurs utilisent les transitions pour les effets de survol des boutons, le zoom des cartes et les changements de couleur dans les liens de navigation.

Questions fréquentes

Quelle est la difference entre transition et animation? — Les transitions reagissent a un changement d'etat (comme le survol); les animations s'executent automatiquement ou en boucle avec des keyframes.
Puis-je animer plusieurs proprietes? — Oui. Cliquez sur "Ajouter une transition" pour ajouter plusieurs regles de proprietes separees par des virgules.
Quelles proprietes peuvent etre animees? — La plupart des proprietes avec des valeurs numeriques: opacity, color, transform, dimensions, etc. Les proprietes comme display ne peuvent pas etre animees.