Een transition maakt een eigenschap vloeiend van de oude waarde naar een nieuwe waarde over een bepaalde tijd, in plaats van deze onmiddellijk te veranderen. Je declareert wat je wilt animeren en hoe lang, en triggert het vervolgens door de eigenschap te wijzigen (vaak via :hover of een class).
{
: blue;
: background ease;
}
{
: darkblue;
}
De vier onderdelen van de afkorting
transition: background 0.3s ease 0s;
/* │ │ │ └── delay before starting */
/* │ │ └─────── timing function (the easing curve) */
/* │ └──────────── duration */
/* └─────────────────────── property to animate (or `all`) */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-4px); /* lifts up */
box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* + deeper shadow */
}
Bewijs elke eigenschap (kommagescheiden) in plaats van all te gebruiken, wat per ongeluk dingen kan animeren die je niet bedoelde en de prestaties kan schaden.
transition-timing-function: ease; /* slow-fast-slow (default) */
/* linear | ease-in | ease-out | ease-in-out */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* custom curve */
/* ✅ cheap — GPU-composited, no layout recalculation */
transition: transform 0.3s, opacity 0.3s;
/* ❌ expensive — animating width/top/left triggers layout on every frame */
transition: width 0.3s, left 0.3s;
Geef de voorkeur aan het animeren van transform en opacity; ze worden door de compositor afgehandeld zonder layout opnieuw uit te voeren, zodat ze soepel blijven (60fps).
@media (prefers-reduced-motion: reduce) {
* { transition: none; } /* respect users who get motion sickness */
}
Overgangen voegen de glans toe die een UI responsief en levendig doet aanvoelen (hover-effecten, soepele statusveranderingen) met slechts één regel.
Weten dat je transform/opacity moet animeren voor prestaties — en prefers-reduced-motion moet respecteren — is wat vloeiende, toegankelijke beweging van stroeve animatie onderscheidt.