6XC

CSS Overgang Generator

Bouw een transition — eigenschap, duur, timingfunctie en vertraging — en test deze live met één klik.

909 weergaven

De eigenschap transition

Syntax: transition: eigenschap duur timingfunctie vertraging. Het animeert wijzigingen die worden geactiveerd door hover, focus of klassewisselingen. De timingfunctie bepaalt het gevoel: ease is de natuurlijke standaard, ease-out past bij binnenkomsten, en aangepaste cubic-bezier-curves creëren veerkrachtige overshoots. Druk op de testknop om uw instellingen in actie te zien.

Veelgestelde vragen

Welke eigenschappen zijn goedkoop om te animeren?

transform en opacity — de browser kan ze op de GPU samenstellen zonder herberekening van de layout. Het animeren van width, height of top forceert elke frame een layout-herberekening en kan haperen.

Wat is een goede standaardduur?

150-250 ms voor kleine UI-feedback (knoppen, hover) en 300-500 ms voor grotere bewegingen. Boven ~700 ms gaan interfaces traag aanvoelen.

Vergelijkbare tools

CSS Kleurverloop Generator Ontwerp lineaire, radiale en conische CSS-kleurverlopen met live voorbeeld en kopieer de code. Genereren CSS Box Shadow Generator Ontwerp een box-shadow visueel — verschuiving, vervaging, spreiding, kleur, dekking en inset — met live preview. Genereren CSS Border-Radius Generator Rond elke hoek afzonderlijk of allemaal tegelijk af, in px of %, met live voorbeeld en kopieerbare CSS. Genereren CSS Tekstschaduw Generator Ontwerp een text-shadow met verschuiving, vervaging, kleur en dekking — live voorbeeld op voorbeeldtekst. Genereren