TL
Tool Lab
💰Donate
💰Donate

CSS Transition Generator

Configure CSS transitions with hover preview.

Overgang 1
Zweef over mij
.element {
  transition: all 0.3s ease 0s;
}

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

Over deze tool

De CSS-overgangsgenerator laat u de transition-afkorting configureren door de doeleigenschap, duur, timingfunctie en vertraging in te stellen. De interactieve voorvertoning toont het gedrag voordat u de code kopieert.

CSS-overgangen creëren vloeiende statuswijzigingen tussen twee CSS-waarden, geactiveerd door pseudo-klassen zoals :hover, :focus of klassewijzigingen via JavaScript.

Hoe te gebruiken

  1. Selecteer de CSS-eigenschap om te animeren (of gebruik all).
  2. Stel de duur in — hoe lang duurt de overgang (bijv. 0.3s).
  3. Kies een timingfunctie om de versnellingscurve te bepalen.
  4. Voeg optioneel een vertraging toe voordat de overgang begint.
  5. Zweef over de voorvertoningsdoos om het effect live te zien, kopieer daarna de CSS.

Gebruiksscenario's

Ontwikkelaars gebruiken overgangen voor knopcursor-effecten, kaart-zoom en kleurwijzigingen in navigatielinks. Formulierontwerpers gebruiken ze voor invoer-focusstijlen.

Veelgestelde vragen

  • Wat is het verschil tussen transition en animation? — Overgangen reageren op een statuswijziging (zoals hover); animaties lopen automatisch of in een lus met keyframes.
  • Kan ik meerdere eigenschappen animeren? — Ja. Klik op "Overgang toevoegen" om meerdere door komma gescheiden eigenschapsregels toe te voegen.
  • Welke eigenschappen kunnen worden geanimeerd? — De meeste eigenschappen met numerieke waarden: opacity, color, transform, dimensies, enz. Eigenschappen zoals display kunnen niet worden geanimeerd.