Tailwind-animaties: ingebouwde classes en eigen keyframes
Gids voor Tailwind-animaties
Tailwind-animaties: ingebouwde classes en eigen keyframes | We.Inc
Bekijk animate-spin, ping, pulse en bounce live met hun exacte CSS, en voeg daarna eigen keyframes toe in Tailwind v4 met @theme, met een keyframe-bouwer en tips voor verminderde beweging.
Tailwind levert vier kant-en-klare animaties: animate-spin voor laadindicatoren, animate-ping voor meldingsstippen, animate-pulse voor skeletonschermen en animate-bounce voor scrollhints, plus animate-none om ze te stoppen. In v4 voegt u uw eigen animaties toe door binnen @theme een variabele --animate-name en de bijbehorende @keyframes te declareren, wat een class animate-name oplevert.
Ingebouwde animatie-utilities in Tailwind v4
Class
Waarde
Typisch gebruik
spin 1s linear infinite
Laadspinners
ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
Badges voor live of ongelezen
pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
Skeleton-placeholders
bounce 1s infinite
Pijlen om omlaag te scrollen
animation: none
Een animatie uitzetten bij een breakpoint of toestand
Elke ingebouwde animatie hieronder draait live, naast de keyframes die Tailwind ervoor genereert. Bouw daarna een eigen animatie: kies de beweging, timing en het aantal herhalingen en kopieer een kant-en-klaar @theme-blok voor Tailwind v4, of de bijbehorende config voor oudere v3-projecten.
Bekijk de vier ingebouwde animaties en kopieer de class die u nodig hebt.
Zet het voorbeeld met verminderde beweging aan of uit om te zien wat motion-safe en motion-reduce doen.
Gebruik de keyframe-bouwer om een beweging, duur, easing en aantal herhalingen te kiezen.
Plak het gegenereerde @theme-blok in het CSS-bestand dat Tailwind importeert en gebruik daarna de nieuwe class.
Omhul decoratieve beweging met motion-safe:, zodat mensen die hun systeem om minder beweging vragen die ook niet krijgen.
Animeer transform en opacity. Het animeren van width, height of top dwingt bij elk frame layoutwerk af.
Gebruik animate-[name_duration_easing] voor een eenmalige waarde; underscores staan binnen de haken voor spaties.
Voor hover en toestandswijzigingen is een transition-utility meestal beter dan een keyframe-animatie.
Houd intro-animaties kort, ongeveer 150 tot 300 milliseconden, zodat de pagina nooit traag aanvoelt.
Veelgestelde vragen
Hoe voeg ik een eigen animatie toe in Tailwind v4?
Declareer binnen @theme in uw hoofd-CSS-bestand --animate-wiggle: wiggle 1s ease-in-out infinite; en zet de regel @keyframes wiggle in hetzelfde @theme-blok. Tailwind genereert dan een class animate-wiggle die u overal kunt gebruiken.
Waar zijn de keyframes uit tailwind.config.js gebleven in v4?
v4 wordt in CSS geconfigureerd, dus theme.extend.keyframes en theme.extend.animation worden @keyframes en --animate-*-variabelen binnen @theme. Een JavaScript-config werkt nog steeds als u die laadt met de @config-directive, wat helpt tijdens een migratie.
Hoe laat ik een animatie één keer afspelen?
Laat infinite weg uit de waarde en voeg forwards toe als het element op het laatste frame moet blijven staan, bijvoorbeeld --animate-fade-in: fade-in 0.3s ease-out forwards. Voor een eenmalig geval kunt u ook animate-[fade-in_0.3s_ease-out_forwards] schrijven.
Houdt Tailwind automatisch rekening met instellingen voor verminderde beweging?
Nee. De varianten motion-safe: en motion-reduce: koppelen aan de media query prefers-reduced-motion, maar u moet ze zelf toepassen. Een veelgebruikt patroon is motion-safe:animate-bounce, dat alleen animeert voor mensen die niet om verminderde beweging hebben gevraagd.
Waarvoor elke ingebouwde animatie dient
Spin draait een element elke seconde een volle slag en past bij ronde laadindicatoren. Ping schaalt een kopie van een stip op tot twee keer de grootte terwijl die vervaagt, wat leest als een radarpuls; zet het op een absoluut gepositioneerde span achter een volle stip.
Pulse laat de opacity in twee seconden zakken tot de helft en weer terug, de standaardlook voor grijze skeletonblokken terwijl inhoud laadt. Bounce duwt een element een kwart van zijn hoogte omhoog en laat het weer vallen, wat werkt voor één pijl die mensen uitnodigt om te scrollen, en zelden ergens anders.
Eigen keyframes in v4
Tailwind v4 heeft de configuratie naar CSS verplaatst. Elke variabele in de namespace --animate-* binnen @theme wordt een animate-*-utility, en @keyframes die in hetzelfde blok staan worden ernaast uitgevoerd. Verder hoeft er niets te worden geregistreerd.
Houd de naam in de variabele en de naam in @keyframes identiek. Een verschil levert een class op die een animatie instelt die verwijst naar keyframes die niet bestaan, zodat er niets beweegt en er geen foutmelding verschijnt.
Beweging en toegankelijkheid
Grote, herhalende of parallax-beweging kan sommige mensen onwel maken. Besturingssystemen bieden een instelling om beweging te verminderen, en browsers geven die aan CSS door als prefers-reduced-motion.
Laadindicatoren die een status doorgeven, mogen een rustige versie houden, terwijl decoratieve bounces en blikvangers moeten stoppen. Test met de instelling ingeschakeld, of met de emulatieoptie in de ontwikkelaarstools van uw browser.
De CSS achter de ingebouwde classes
Keyframes die Tailwind v4 genereert
Elke animate-*-class zet animation op een themavariabele; dit zijn de standaardwaarden en keyframes.
Eigen animaties in v4 en v3
Tailwind v4: @theme in uw CSS
Dit maakt animate-wiggle en animate-fade-up. Gebruik ze meteen als classnamen.
De oudere JavaScript-config, voor projecten die nog niet naar v4 zijn overgestapt.
Ze gebruiken in markup
Arbitraire waarden, een verwijzing naar een variabele, en motion-safe zodat de beweging de systeeminstelling respecteert.
Eigen keyframes live in actie
Wiggle, fade up en een skeletonkaart
Gewone CSS-equivalenten van de eigen classes hierboven, zodat u de timing kunt aanpassen en de verandering kunt zien.
De ingebouwde animaties, live
Elk voorbeeld gebruikt de echte Tailwind-class. Zet het voorbeeld met verminderde beweging aan om motion-safe aan het werk te zien.
Voorbeeld verminderde beweging: aan
Voorbeeld verminderde beweging: uit
Keyframe-bouwer
Kies een beweging, duur, easing en aantal herhalingen en kopieer daarna het @theme-blok voor Tailwind v4.