Egendefinerte animasjoner i konfigurasjonen
Definer egendefinerte keyframes og animasjonsverktøy i tailwind.config.js, og referer til dem med animate-*-klasser i markupen.
Egendefinerte animasjoner i konfigurasjonen er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Tailwind CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Utover de fire innebygde animasjonene
Tailwinds fire innebygde animasjoner dekker vanlige mønstre for innlasting og oppmerksomhet, men virkelige prosjekter trenger ofte flere animasjoner: inntoning av innhold når det vises, sidestolpepaneler som glir inn, risteeffekter ved skjemafeil eller egendefinerte pulseringsvarianter. Ved å legge til oppføringer i theme.extend.keyframes og theme.extend.animation i konfigurasjonen lager du nye animate-*-verktøyklasser som fungerer nøyaktig som de innebygde.
Definere egendefinerte keyframes
Legg til egendefinerte CSS-keyframes i theme.extend.keyframes. Hver nøkkel i objektet blir et keyframe-navn. Verdien er et objekt der nøklene er prosentstrenger eller nøkkelordene 'from'/'to', og verdiene er CSS-egenskapsobjekter. Tailwind konverterer denne objektnotasjonen til CSS-regelen @keyframes i det kompilerte resultatet. Du kan bruke alle animerbare CSS-egenskaper i keyframe-trinnene.
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
// Fade in from transparent
'fade-in': {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
// Slide up from below
'slide-up': {
'0%': { opacity: '0', transform: 'translateY(16px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
// Shake (for errors)
'shake': {
'0%, 100%': { transform: 'translateX(0)' },
'20%, 60%': { transform: 'translateX(-8px)' },
'40%, 80%': { transform: 'translateX(8px)' },
},
},
},
},
};Registrere egendefinerte animasjonsverktøyklasser
Etter at du har definert keyframes, registrerer du dem som navngitte animasjoner i theme.extend.animation. Verdien er en forkortet CSS-animasjonsstreng: name duration timing-function delay iteration-count direction fill-mode. Navnet må samsvare med et keyframe som er definert i theme.extend.keyframes. Tailwind genererer en animate-{key}-verktøyklasse for hver oppføring.
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: { /* ... defined above ... */ },
animation: {
'fade-in': 'fade-in 0.3s ease-out',
'slide-up': 'slide-up 0.4s ease-out',
'shake': 'shake 0.5s ease-in-out 1',
// Multiple values
'fade-in-slow': 'fade-in 1s ease-in-out',
// Infinite loop
'fade-in-out': 'fade-in 1.5s ease-in-out infinite alternate',
},
},
},
};Bruke egendefinerte animasjoner i HTML
Når de er registrert i konfigurasjonen, blir egendefinerte animasjoner tilgjengelige som animate-{key}-klasser i HTML-en. De fungerer akkurat som de innebygde animate-verktøyene og kan kombineres med responsive prefikser, tilstandsvarianter og motion-reduce:-varianten av hensyn til tilgjengelighet. Animasjonen spilles av når klassen er til stede, og stopper når klassen fjernes – perfekt for innlastingseffekter som utløses av JavaScript.
<!-- Fade in a card on page load -->
<div class="animate-fade-in bg-white rounded-xl p-6 shadow">
Content fades in smoothly
</div>
<!-- Slide up with a slight delay using inline style -->
<div class="animate-slide-up" style="animation-delay: 150ms">
Content slides up after 150ms delay
</div>
<!-- Shake an input on validation error -->
<input
id="email"
class="border border-red-500 animate-shake focus:outline-none px-4 py-2 rounded-lg w-full"
type="email"
placeholder="Invalid email"
/>Innlastingsanimasjoner for innhold
Innlastingsanimasjoner (fade-in, slide-up, scale-in) får innholdet til å føles levende når det vises. De fungerer best når innholdet kommer inn i visningsområdet for første gang – ved sidelasting eller når en seksjon blir synlig under rulling. Hold varigheten på innlastingen mellom 200 og 400 ms, og kombiner den alltid med en passende easing-funksjon. Bruk Intersection Observer API i JavaScript for å utløse animasjoner når elementer rulles inn i visningsområdet.
// JavaScript: trigger animation when element enters viewport
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-slide-up');
observer.unobserve(entry.target); // animate once
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
observer.observe(el);
});
<!-- HTML: starts invisible, gets class on scroll -->
<div class="opacity-0 animate-on-scroll">Animated on scroll</div>Mer komplekse keyframe-eksempler
Komplekse animasjoner bruker flere prosenttrinn i keyframes for å lage bevegelser i flere faser. En hjertebankanimasjon skalerer opp og deretter ned igjen i en rytme med to slag. En flash-animasjon fremhever et element kortvarig med en bakgrunnsfarge. En slide-in-right-animasjon flytter og toner ut elementet samtidig. Disse sammensatte animasjonene krever flere prosenttrinn for å beskrive hvert bevegelsesstadium nøyaktig.
// tailwind.config.js
keyframes: {
'heartbeat': {
'0%, 100%': { transform: 'scale(1)' },
'14%': { transform: 'scale(1.3)' },
'28%': { transform: 'scale(1)' },
'42%': { transform: 'scale(1.3)' },
'70%': { transform: 'scale(1)' },
},
'flash': {
'0%, 50%, 100%': { opacity: '1' },
'25%, 75%': { opacity: '0.25' },
},
'slide-in-right': {
'0%': { opacity: '0', transform: 'translateX(32px)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
},
animation: {
'heartbeat': 'heartbeat 1.2s ease-in-out infinite',
'flash': 'flash 0.5s ease-in-out',
'slide-in-right': 'slide-in-right 0.3s ease-out',
}Fyllmodus for animasjoner
CSS-egenskapen animation-fill-mode styrer hva som skjer før animasjonen starter (hvis det finnes en forsinkelse), og etter at den er ferdig. forwards lar elementet beholde sluttstatusen etter at animasjonen er ferdig – noe som er avgjørende for engangsinnlastingsanimasjoner der elementet skal forbli synlig. backwards bruker det første bildet i forsinkelsesperioden, slik at elementer starter i riktig opprinnelig status. Ta med fyllmodus i kortformen for animasjonen.
// animation shorthand: name | duration | easing | delay | count | fill-mode
animation: {
// 'forwards' keeps final state (element stays visible after fading in)
'fade-in': 'fade-in 0.3s ease-out forwards',
// 'backwards' applies frame-0 during delay (starts transparent during delay)
'fade-in-delayed': 'fade-in 0.4s ease-out 0.2s backwards',
// No fill mode: jumps back to initial state after animation
'shake': 'shake 0.5s ease-in-out',
}Sette animasjoner på pause og gjenoppta dem
De kan sette en Tailwind-animasjon på pause ved å bruke animation-play-state: paused. Legg til en egendefinert verktøyklasse, eller bruk en vilkårlig verdi: [animation-play-state:paused]. Dette er nyttig for å sette innlastingsanimasjoner på pause når en side ikke er synlig (ved hjelp av Page Visibility API), eller for å sette hover-animasjoner på pause slik at brukerne får tid til å samhandle med innholdet. Tailwind har ikke et innebygd pauseverktøy, men vilkårlig CSS eller en egendefinert verktøyklasse dekker behovet.
@layer utilities {
.animation-paused { animation-play-state: paused; }
.animation-running { animation-play-state: running; }
}
<!-- Pause animation on hover -->
<div class="animate-pulse hover:animation-paused bg-gray-200 rounded h-4 w-48">
Pauses pulsing when hovered
</div>
<!-- JavaScript: pause when page is hidden -->
document.addEventListener('visibilitychange', () => {
const spinners = document.querySelectorAll('.animate-spin');
spinners.forEach(el => {
el.style.animationPlayState = document.hidden ? 'paused' : 'running';
});
});Ta hensyn til redusert bevegelse i egendefinerte animasjoner
Alle egendefinerte animasjoner De lager, bør også ha en motion-reduce:-tilpasning. Den enkleste løsningen er motion-reduce:animate-none, som deaktiverer animasjonen helt. For innlastingsanimasjoner der De fortsatt vil vise sluttstatusen, kan De bruke motion-reduce:opacity-100 sammen med motion-reduce:animate-none for å sikre at elementet er synlig selv når fade-in-animasjonen hoppes over.
<!-- Accessible entrance animation -->
<div
class="
opacity-0 animate-fade-in
motion-reduce:opacity-100 motion-reduce:animate-none
"
>
Content visible immediately for reduced-motion users,
fades in for others
</div>
<!-- Accessible slide-up -->
<div
class="
opacity-0 translate-y-4 animate-slide-up
motion-reduce:opacity-100 motion-reduce:translate-y-0 motion-reduce:animate-none
"
>
Reduced motion: appears instantly at final position
</div>Tredjepartsanimasjonsbiblioteker med Tailwind
For mer avanserte animasjoner – fjærfysikk, rullestyrte animasjoner eller kompleks koreografi – fungerer tredjepartsbiblioteker som tailwindcss-animate, Framer Motion (React) og GSAP godt sammen med Tailwind. Tailwindcss-animate tilbyr et rikt utvalg forhåndsbygde keyframes (accordion-down, accordion-up, fade-in og så videre) som en plugin, og utvider umiddelbart de tilgjengelige animate-*-verktøyene. Det brukes som standard i shadcn/ui-komponenter.
// Install tailwindcss-animate
// npm install tailwindcss-animate
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-animate'),
],
};
<!-- Now you have many new animate-* utilities -->
<div class="animate-in fade-in slide-in-from-bottom-4 duration-300">
Animated with tailwindcss-animate
</div>
<div class="animate-out fade-out slide-out-to-top-4 duration-200">
Exit animation
</div>Feilsøke egendefinerte animasjoner
Bruk fanen Animations i Chrome DevTools til å undersøke og feilsøke egendefinerte animasjoner. Velg elementet i Elements-panelet, og åpne deretter Animations-panelet. Kjør animasjonen, så ser De keyframe-kurven visualisert med tidsmarkører. De kan senke avspillingen til 0.25x hastighet for å undersøke hvert stadium nøye. Panelet lar Dem også spille av animasjoner på nytt ved behov, noe som er langt enklere enn å oppdatere siden for å fange innlastingsanimasjoner.
Kort kontroll
Test forståelsen Deres av egendefinerte animasjoner i Tailwind-konfigurasjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De å definere egendefinerte keyframes i theme.extend.keyframes og registrere dem som verktøy i theme.extend.animation, bruke animation fill-mode forwards for engangsinnlastingsanimasjoner som skal beholde sluttstatusen, og alltid kombinere egendefinerte animasjoner med motion-reduce:animate-none av hensyn til tilgjengelighet. Dette avslutter kurset om animasjoner og overganger – nå skal vi bygge gjennomarbeidede komponentmønstre.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Egendefinerte animasjoner i konfigurasjonen» gratis?
Ja – hele teksten i «Egendefinerte animasjoner i konfigurasjonen» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Tailwind CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Egendefinerte animasjoner i konfigurasjonen»?
Definer egendefinerte keyframes og animasjonsverktøy i tailwind.config.js, og referer til dem med animate-*-klasser i markupen. Du øver på Tailwind CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Tailwind CSS Academy?
Ingen tidligere erfaring er nødvendig. Tailwind CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Egendefinerte animasjoner i konfigurasjonen»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Tailwind CSS Academy-leksjonen?
Ja. Alle Tailwind CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Transition-verktøy
- Varighet og easing
- Innebygde keyframe-animasjoner
- Egendefinerte animasjoner i konfigurasjonen