Transition af flere egenskaber

Interaktioner i virkelige brugerflader involverer ofte flere egenskaber, der ændres samtidig — baggrundsfarve, skygge og skalering ved hover. CSS understøtter uafhængige easingfunktioner og varigheder for hver egenskab.

Angiv flere overgange med kommaer. Hver post gælder uafhængigt for én egenskab:

Giv hver egenskab en forskellig hastighed for at opnå et lagdelt og naturligt udtryk:

Kombinér easingfunktioner, så hver egenskab føles passende:

Brug af transition: all betyder, at alle egenskaber, der ændres, får den samme tidsindstilling. Det kan medføre uønskede animationer for egenskaber, der bør skifte brat (som ændringer af display eller position).

CSS-overgange kan afbrydes. Hvis hovertilstanden ophører midt i overgangen, vender overgangen om fra den aktuelle animerede værdi, ikke fra sluttilstanden. Det giver jævne vendinger uden bratte spring.

Brug forskellige varigheder for ind- og udgang ved at tilsidesætte overgange i :hover-tilstanden:

Tilføj stigende forsinkelser til søskendeelementer for at opnå en forskudt fremvisningseffekt:

Tildel forskydningsforsinkelsen fra en brugerdefineret CSS-egenskab, der angives via JavaScript eller HTML:

Brug overgange til ændringer med to tilstande (inaktiv → hover). Brug @keyframes-animationer til sekvenser med flere trin, gentagne effekter eller animationer, der starter af sig selv.

Fortæl browseren, hvilke egenskaber der vil blive animeret, så den kan foroptimere dem. Brug det med omtanke — det bruger GPU-hukommelse.

Kommaadskilte overgange gør det muligt for hver egenskab at have sin egen varighed, easing og forsinkelse. Undgå transition: all – det kan animere egenskaber, du ikke havde til hensigt at ændre. Overgange kan afbrydes og vender jævnt tilbage fra deres aktuelle position. Brug forsinkelser til forskudte effekter.