CSS-keyframe-animationer med React

En regel med @keyframes beskriver en animation i flere trin ved at angive egenskabsværdier på forskellige tidspunkter på en tidslinje ved hjælp af from/to eller procenter som 0%, 50% og 100%.

I modsætning til overgange kan keyframes beskrive komplekse bevægelser i flere trin, der kører af sig selv uden en tilstandsændring ved hvert trin.

Du anvender et nøglebilledesæt med egenskaben animation: animation: slideIn 400ms ease forwards. Den samler navn, varighed, tidsfunktion og udfyldningstilstand.

Udfyldningstilstanden forwards fastholder elementet ved værdierne fra det sidste nøglebillede, når animationen slutter, så det ikke springer tilbage til begyndelsen.

I React tilføjer du typisk en klasse, der indeholder animation-erklæringen, når tilstanden bliver sand. Hvis du for eksempel tilføjer is-entering, starter nøglebillederne, så snart elementet monteres, eller et flag skifter.

Det holder animationslogikken i CSS, mens React blot bestemmer, hvornår klassen skal tilføjes.

animation-fill-mode bestemmer, hvilke stilegenskaber der gælder før og efter animationen kører. forwards bevarer det sidste nøglebillede, backwards anvender det første nøglebillede under en eventuel forsinkelse, og both gør begge dele.

Uden forwards ville et element, der animeres til en indtonet tilstand, springe tilbage til usynlighed, når animationen er færdig.

animation-direction: alternate afspiller animationen fremad og derefter baglæns ved hver gentagelse. Kombineret med animation-iteration-count: infinite skaber det en jævn frem-og-tilbage-bevægelse, som en pulserende eller åndende effekt.

Det er praktisk til indlæsningsindikatorer eller diskrete bevægelser, der tiltrækker opmærksomhed.

animation-play-state kan være running eller paused. Du kan styre den via React-tilstand, for eksempel sætte en løbende tekst på pause ved hover ved at skifte klasse.

Fordi animationen sættes på pause i stedet for at blive nulstillet, fortsætter den præcis fra det sted, hvor den stoppede.

En keyframe-animation afspilles kun én gang, når dens klasse anvendes første gang; hvis du tilføjer den samme klasse igen, starter animationen ikke forfra. Det reneste React-trick er at ændre elementets key, så React monterer en ny node, der afspiller animationen fra begyndelsen.

Hvis du for eksempel bruger key={count} på en toast, monteres den på ny, hver gang count øges.

Nogle brugere aktiverer reduceret bevægelse i deres operativsystem af hensyn til komfort eller tilgængelighed. Pak ikke-vigtige animationer ind i @media (prefers-reduced-motion: reduce), og deaktiver eller forkort dem dér.

Når du respekterer denne indstilling, bliver din grænseflade mere inkluderende, og du undgår at udløse ubehag.

Hvis du vil animere elementer, når de kommer ind i visningsområdet, skal du bruge en IntersectionObserver i en useEffect. Når elementet bliver synligt, opdaterer du tilstanden, hvilket tilføjer animationsklassen.

Det giver effekter, hvor elementer vises ved rulning, uden tunge lyttere til rulning, der kører ved hvert billede.

animation-delay forskyder, hvornår hver keyframe-animation begynder. Hvis du giver en liste stigende forsinkelser, animeres elementerne i rækkefølge, så de vises på en koordineret måde.

Du kan beregne forsinkelsen for hvert element i React med style={{ animationDelay: i * 80 + 'ms' }}.

Brug overgange til enkle ændringer mellem to tilstande, der styres af interaktion, og keyframes, når du har brug for bevægelse i flere trin, gentagelser eller en animation, der kører uafhængigt af et tilstandsskift.

Begge dele er ren CSS, så React bestemmer kun, hvornår klasser sættes på, mens browseren håndterer billederne.

Du har lært at definere @keyframes, anvende dem med genvejen animation, styre udfyldningstilstand og retning, sætte animationer på pause og udløse dem igen samt vise elementer ved rulning med IntersectionObserver.

Du har også set, hvordan du respekterer prefers-reduced-motion for at skabe tilgængelig bevægelse.