Övergångsverktyg
Aktivera CSS-övergångar med transition-* och välj vilka egenskaper som ska animeras med transition-colors, transition-transform och transition-all.
Övergångsverktyg är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Tailwind CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Varför CSS-övergångar är viktiga
CSS-övergångar gör förändringar av tillstånd mjuka och avsiktliga i stället för abrupta. När en knapp byter bakgrundsfärg vid hovring, ett sidofält glider in eller ett inmatningsfält får en fokusmarkering visar övergångar användarna att något har hänt och leder deras uppmärksamhet. Med Tailwinds transition-utilities kan Ni lägga till dessa animationer med en enda klass – ingen egen CSS krävs för de vanligaste användningsfallen.
Utilityn transition
Bas-utilityn transition aktiverar CSS-övergångar för de vanligaste animerade egenskaperna: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform och filter. Det räcker vanligtvis att lägga till transition på en knapp för att animeringen av färgändringar vid hovring ska bli mjuk.
<!-- 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) -->Specifika övergångsegenskaper
Använd riktade transition-utilities för att animera endast specifika egenskaper. Det ger bättre prestanda än transition-all, eftersom webbläsaren inte behöver beräkna om alla möjliga animerade egenskaper vid varje bildruta. Tailwind tillhandahåller transition-colors, transition-opacity, transition-shadow, transition-transform och transition-all för olika 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 jämfört med specifika egenskaper
transition-all animerar alla animerbara CSS-egenskaper samtidigt. Även om det är praktiskt kan det orsaka oväntat beteende – till exempel att layoutegenskaper som height eller width börjar animeras när Ni bara ville ändra färger. Det ger också sämre prestanda eftersom webbläsaren bevakar alla egenskaper. Använd specifika transition-utilities när det är möjligt och välj transition-all endast när Ni verkligen behöver animera flera orelaterade egenskaper tillsammans.
<!-- 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>Kombinera transition med tillståndsvarianter
Transition-utilities fungerar genom att aktivera CSS-egenskapen transition. Tillståndsvarianter som hover:, focus: och group-hover: tillhandahåller före- och eftertillstånden som övergången animerar mellan. Placera alltid klassen transition på baselementet (inte inuti varianten) så att den gäller i båda riktningarna – övergången körs både när tillståndet aktiveras och när det lämnas.
<!-- 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>Animera opacitet och synlighet
För att tona in och ut element behöver Ni övergå mellan opacity-värden och samtidigt hantera visibility eller display. CSS-övergångar kan inte animera till eller från display: none, så använd opacity tillsammans med pointer-events-none för enkla toningseffekter. För element som verkligen måste försvinna (och tas bort från tabbordningen) kombinerar Ni opacitetsövergångar med att växla 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') -->Transformationsövergångar
Transformationsövergångar är särskilt mjuka eftersom de körs på GPU:n i stället för att utlösa omberäkningar av layouten. Tailwinds utilities scale-*, rotate-*, translate-* och skew-* animeras alla smidigt med transition-transform. Skalningseffekter på kort och knappar, rotationseffekter på ikoner och inskjutningseffekter på paneler använder alla denna metod för bästa prestanda.
<!-- 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>Tillgänglighet med reducerad rörelse
Vissa användare får åksjuka eller anfall av animationer och ställer in operativsystemet på Reduce Motion. Tailwind tillhandahåller varianterna motion-reduce: och motion-safe:, som aktiveras baserat på användarens mediafråga prefers-reduced-motion. Använd motion-safe: för att bara tillämpa animationer när användaren inte har begärt reducerad rörelse. Då blir övergångarna tillgängliga som standard.
<!-- 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>Övergångar i fokustillstånd
Fokusövergångar är särskilt viktiga vid tangentbordsnavigering. När en användare tabbar till ett inmatningsfält eller en knapp bör fokusmarkeringen visas mjukt i stället för att plötsligt dyka upp. Lägg till transition på alla interaktiva element så att övergången för fokusmarkeringen känns lika genomarbetad som övergången vid hovring. Inkludera focus:ring-* och focus:ring-offset-* tillsammans med en övergång för bästa möjliga tangentbordsupplevelse.
<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"
/>Flera övergångsegenskaper
Ni kan kombinera flera specifika transition-utilities på ett enda element för att bara animera en exakt uppsättning egenskaper. Tailwind sammanfogar dessa med CSS-genvägen transition-property. Om Ni staplar transition-colors och transition-shadow på samma element animeras både färger och skuggor, medan andra egenskaper (som transformeringar) ändras direkt.
<!-- 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>Transition i praktiken: ett komplett exempel
Här är en navigeringslänk från verkligheten med genomarbetade övergångar: bakgrunden tonas in vid hovring, textfärgen ändras samtidigt, understrykningen växer från vänster till höger med hjälp av en skaltransformering och fokustillstånden matchar hovringsstilen exakt. Varje interaktion känns avsiktlig och mjuk utan en enda rad egen 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>Snabbtest
Testa Era kunskaper om Tailwinds transition-utilities.
Sammanfattning av lektionen
I den här lektionen har Ni lärt Er att bas-utilityn transition aktiverar mjuka animationer för vanliga egenskaper, att specifika transition-utilities som transition-colors och transition-transform ger bättre prestanda än transition-all och att varianten motion-safe: ser till att animationer bara används när användaren inte har begärt reducerad rörelse. Härnäst styr vi övergångarnas varaktighet och timingfunktioner.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Övergångsverktyg” gratis?
Ja – hela texten till ”Övergångsverktyg” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Tailwind CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Övergångsverktyg”?
Aktivera CSS-övergångar med transition-* och välj vilka egenskaper som ska animeras med transition-colors, transition-transform och transition-all. Ni övar på Tailwind CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Tailwind CSS Academy?
Du behöver inga förkunskaper. Utbildningen i Tailwind CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Övergångsverktyg”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Tailwind CSS Academy-lektionen?
Ja. Varje Tailwind CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Övergångsverktyg
- Varaktighet och easing
- Inbyggda keyframe-animationer
- Anpassade animationer i konfigurationen