Meerdere eigenschappen transitionen

Bij echte interacties in een gebruikersinterface veranderen vaak meerdere eigenschappen tegelijk — bijvoorbeeld achtergrondkleur, schaduw en schaal bij aanwijzen. CSS ondersteunt een onafhankelijke versoepeling en tijdsduur per eigenschap.

Vermeld meerdere overgangen met een komma. Elke vermelding geldt onafhankelijk voor één eigenschap:

Geef elke eigenschap een eigen snelheid voor een gelaagd, natuurlijk gevoel:

Combineer versoepelingsfuncties zodat elke eigenschap passend aanvoelt:

Bij transition: all krijgt elke veranderende eigenschap dezelfde timing. Dit kan ongewenste animaties veroorzaken voor eigenschappen die direct moeten overspringen (zoals wijzigingen van display of positie).

CSS-overgangen kunnen worden onderbroken. Als de hover-toestand tijdens een overgang eindigt, keert de overgang terug vanaf de huidige geanimeerde waarde, niet vanaf de eindtoestand. Zo ontstaan vloeiende omkeringen zonder schokkende sprongen.

Gebruik verschillende tijdsduren voor het activeren en verlaten van hover door overgangen in de :hover-toestand te overschrijven:

Voeg oplopende vertragingen toe aan naastgelegen elementen voor een gefaseerd onthullingseffect:

Wijs de vertraging voor de fasering toe via een CSS-aangepaste eigenschap die vanuit JavaScript of HTML wordt ingesteld:

Gebruik overgangen voor wijzigingen tussen twee toestanden (inactief → hover). Gebruik @keyframes-animaties voor reeksen met meerdere stappen, herhalende effecten of animaties die vanzelf starten.

Geef de browser een hint over welke eigenschappen worden geanimeerd, zodat vooraf optimalisaties kunnen worden uitgevoerd. Gebruik dit spaarzaam — het verbruikt GPU-geheugen.

Door komma's gescheiden overgangen geven elke eigenschap een eigen duur, timingfunctie en vertraging. Vermijd transition: all — hiermee kunnen onbedoeld ook andere eigenschappen worden geanimeerd. Overgangen kunnen worden onderbroken en keren vanuit hun huidige positie vloeiend terug. Gebruik vertragingen voor trapsgewijze effecten.