Transition-verktøy
Aktiver CSS-overganger med transition-*, og velg hvilke egenskaper som skal animeres med transition-colors, transition-transform og transition-all.
Transition-verktøy er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 1 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.
Hvorfor CSS-overganger er viktige
CSS-overganger gjør endringer i tilstand jevne og mer tilsiktede i stedet for brå. Når en knapp endrer bakgrunnsfarge ved hover, en sidemeny glir inn eller et inndatafelt får en fokusramme, signaliserer overgangene til brukerne at noe har skjedd, og leder oppmerksomheten deres. Tailwinds overgangsutility-klasser lar Dem legge til disse animasjonene med én enkelt klasse – uten egendefinert CSS for de vanligste bruksområdene.
transition-utility-klassen
Den grunnleggende transition-utility-klassen aktiverer CSS-overganger for de vanligste egenskapene å animere: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform og filter. Det er vanligvis nok å legge transition til en knapp for å animere fargeendringer ved hover jevnt.
<!-- Simple hover transition on a button -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
Hover Me
</button>
<!-- The transition class enables smooth color changes -->
<!-- Without it, the color snaps instantly on hover -->
<!-- With it, the background color animates over 150ms (Tailwind default) -->Spesifikke overgangsegenskaper
Bruk målrettede overgangsutility-klasser for å animere bare bestemte egenskaper. Dette gir bedre ytelse enn transition-all, fordi nettleseren ikke trenger å beregne alle mulige animerte egenskaper på nytt for hver frame. Tailwind tilbyr transition-colors, transition-opacity, transition-shadow, transition-transform og transition-all for ulike behov.
<!-- Only animate colors -->
<button class="bg-blue-600 hover:bg-blue-700 text-white transition-colors">
Color Transition
</button>
<!-- Only animate transform (GPU accelerated) -->
<div class="hover:scale-105 transition-transform cursor-pointer">
Scale on hover
</div>
<!-- Only animate opacity -->
<div class="opacity-100 hover:opacity-75 transition-opacity">
Fade on hover
</div>
<!-- Animate shadow (depth change) -->
<div class="shadow hover:shadow-lg transition-shadow rounded-xl p-4">
Shadow depth change
</div>transition-all kontra spesifikke egenskaper
transition-all overfører alle CSS-egenskaper som kan animeres, samtidig. Selv om dette er praktisk, kan det føre til uventet oppførsel – for eksempel at layoutegenskaper som height eller width blir animert når De bare ønsket fargeendringer. Det gir også dårligere ytelse fordi nettleseren følger med på alle egenskapene. Bruk spesifikke overgangsutility-klasser når det er mulig, og bruk transition-all bare når De faktisk trenger å animere flere urelaterte egenskaper samtidig.
<!-- transition-all: animates EVERYTHING that changes -->
<div class="bg-gray-100 hover:bg-blue-50 hover:scale-102 transition-all">
All properties animate (colors, transforms, borders...)
</div>
<!-- More precise: only animate what you intend -->
<div class="bg-gray-100 hover:bg-blue-50 hover:scale-102 transition-colors transition-transform">
Only colors and transforms animate
</div>Kombinere overgang med tilstandsvarianter
Overgangsutility-klasser fungerer ved å aktivere CSS-egenskapen transition. Tilstandsvarianter som hover:, focus: og group-hover: angir tilstandene før og etter som overgangen animerer mellom. Plasser alltid transition-klassen på grunnelementet (ikke inne i varianten), slik at den gjelder i begge retninger – overgangen kjører både når tilstanden aktiveres OG når den avsluttes.
<!-- Transition enables smooth enter AND exit -->
<a class="text-gray-600 hover:text-blue-600 transition-colors duration-200"
href="#">
Animated link — hover to see color change both ways
</a>
<!-- Card with multiple transitions -->
<div class="bg-white hover:bg-blue-50
shadow-sm hover:shadow-md
border border-gray-200 hover:border-blue-200
transition-all duration-200 rounded-xl p-6 cursor-pointer">
Interactive card
</div>Animere gjennomsiktighet og synlighet
For å tone elementer inn og ut må De overføre opacity samtidig som De håndterer visibility eller display. CSS-overganger kan ikke animere til eller fra display: none, så bruk opacity sammen med pointer-events-none for enkle toningseffekter. For elementer som virkelig må forsvinne (slik at de fjernes fra tab-rekkefølgen), kombinerer De opacity-overganger med veksling av klasser i JavaScript.
<!-- Fade an element using opacity + pointer-events -->
<div id="tooltip"
class="opacity-0 pointer-events-none
group-hover:opacity-100 group-hover:pointer-events-auto
transition-opacity duration-200
bg-gray-900 text-white text-xs px-2 py-1 rounded">
Tooltip content
</div>
<!-- JavaScript fade with class toggle -->
<!-- Remove: classList.add('opacity-0', 'pointer-events-none') -->
<!-- Show: classList.remove('opacity-0', 'pointer-events-none') -->Transformasjonsoverganger
Transformasjonsoverganger er spesielt jevne fordi de kjører på GPU-en i stedet for å utløse nye layoutberegninger. Tailwinds scale-*-, rotate-*-, translate-*- og skew-*-utility-klasser animeres alle jevnt med transition-transform. Skaleringseffekter på kort og knapper, rotasjonseffekter på ikoner og innskyvingseffekter på paneler bruker alle denne tilnærmingen for best mulig ytelse.
<!-- Subtle scale effect on card hover -->
<div class="hover:scale-105 transition-transform duration-200 cursor-pointer bg-white rounded-xl p-6 shadow">
Card that scales up on hover
</div>
<!-- Rotating icon -->
<button class="group p-2">
<svg class="w-5 h-5 group-hover:rotate-180 transition-transform duration-300">
<!-- chevron icon -->
</svg>
</button>
<!-- Slide from left with translateX -->
<div class="-translate-x-full open:translate-x-0 transition-transform duration-300">
Sidebar panel
</div>Tilgjengelighet og redusert bevegelse
Noen brukere opplever reisesyke eller anfall på grunn av animasjoner og setter operativsystemet til Reduce Motion. Tailwind tilbyr variantene motion-reduce: og motion-safe:, som aktiveres basert på brukerens prefers-reduced-motion-mediespørring. Bruk motion-safe: for å bruke animasjoner bare når brukeren ikke har bedt om redusert bevegelse, slik at overgangene som standard er tilgjengelige.
<!-- Only animate when user is OK with motion -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg
motion-safe:transition-colors motion-safe:duration-200">
Accessible Button
</button>
<!-- Remove transitions entirely for reduced-motion users -->
<div class="hover:scale-105 motion-reduce:transform-none
motion-safe:transition-transform motion-safe:duration-200">
Accessible card hover
</div>Overgang ved fokustilstander
Fokuso verganger er spesielt viktige for tastaturnavigasjon. Når en bruker tabber til et inndatafelt eller en knapp, bør fokusrammen vises jevnt i stedet for å dukke opp brått. Bruk transition på alle interaktive elementer, slik at overgangen for fokusrammen føles like gjennomarbeidet som hover-overgangen. Inkluder focus:ring-* og focus:ring-offset-* sammen med en overgang for den beste tastaturopplevelsen.
<input
type="text"
class="
w-full px-4 py-2 rounded-lg
border border-gray-300
text-gray-900 placeholder:text-gray-400
ring-0
focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none
transition duration-150
"
placeholder="Smooth focus ring transition"
/>Flere overgangsegenskaper
De kan kombinere flere spesifikke overgangsutility-klasser på ett element for å animere bare et nøyaktig utvalg av egenskaper. Tailwind setter disse sammen ved hjelp av CSS-kortformen transition-property. Når De legger transition-colors og transition-shadow på samme element, animeres både farger og skygger, mens andre egenskaper (som transformasjoner) endres umiddelbart.
<!-- Animate colors AND shadows, but not transforms -->
<div class="
bg-white hover:bg-gray-50
shadow hover:shadow-md
scale-100 hover:scale-105
transition-colors transition-shadow
duration-200 rounded-xl p-6
">
Colors and shadows animate smoothly;
scale change happens instantly (no transition-transform)
</div>Overgang i praksis: Et komplett eksempel
Her er en navigasjonslenke fra den virkelige verden med gjennomarbeidede overganger: bakgrunnen tones inn ved hover, tekstfargen endres samtidig, understrekingen vokser fra venstre mot høyre ved hjelp av en skaleringstransformasjon, og fokustilstandene samsvarer nøyaktig med hover-stilen. Hver interaksjon føles tilsiktet og jevn uten en eneste linje med egendefinert CSS.
<a
href="/features"
class="
relative inline-block
text-gray-600 hover:text-blue-600
font-medium text-sm
pb-0.5
transition-colors duration-150
focus:outline-none focus:text-blue-600
group
"
>
Features
<!-- Animated underline -->
<span class="
absolute bottom-0 left-0 w-full h-0.5 bg-blue-600
scale-x-0 group-hover:scale-x-100
transition-transform duration-200 origin-left
"></span>
</a>Hurtigsjekk
Test forståelsen Deres av Tailwinds overgangsutility-klasser.
Oppsummering av leksjonen
I denne leksjonen har De lært at den grunnleggende transition-utility-klassen aktiverer jevn animasjon for vanlige egenskaper, at spesifikke overgangsutility-klasser som transition-colors og transition-transform gir bedre ytelse enn transition-all, og at motion-safe:-varianten sikrer at animasjoner bare brukes når brukeren ikke har bedt om redusert bevegelse. Neste gang styrer vi overgangens varighet og tidsfunksjoner.
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 «Transition-verktøy» gratis?
Ja – hele teksten i «Transition-verktøy» 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 «Transition-verktøy»?
Aktiver CSS-overganger med transition-*, og velg hvilke egenskaper som skal animeres med transition-colors, transition-transform og transition-all. 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 1 av 4.
Hvor lang tid tar leksjonen «Transition-verktøy»?
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