Utilitas Transisi
Aktifkan transisi CSS dengan transition-*, lalu pilih properti yang dianimasikan menggunakan transition-colors, transition-transform, dan transition-all.
Utilitas Transisi adalah pelajaran Tailwind CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Tailwind CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
Why CSS Transitions Matter
CSS transitions make state changes smooth and feel intentional rather than abrupt. When a button changes background color on hover, a sidebar slides in, or an input gets a focus ring, transitions communicate to users that something happened and guide their attention. Tailwind's transition utilities let you add these animations with a single class — no custom CSS required for the most common use cases.
The transition Utility
The base transition utility enables CSS transitions for the most commonly animated properties: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, and filter. Adding just transition to a button is usually enough to make hover color changes animate smoothly.
<!-- 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) -->Specific Transition Properties
Use targeted transition utilities to animate only specific properties. This is more performant than transition-all because the browser does not need to recalculate all possible animated properties on every frame. Tailwind provides transition-colors, transition-opacity, transition-shadow, transition-transform, and transition-all for different needs.
<!-- 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 vs Specific Properties
transition-all transitions every animatable CSS property simultaneously. While convenient, it can cause unexpected behavior — for example, layout properties like height or width becoming animated when you only wanted color changes. It is also less performant because the browser tracks all properties. Use specific transition utilities whenever possible; reach for transition-all only when you genuinely need multiple unrelated properties to animate together.
<!-- 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>Combining Transition with State Variants
Transition utilities work by enabling the CSS transition property. State variants like hover:, focus:, and group-hover: provide the before and after states that the transition animates between. Always place the transition class on the base element (not inside the variant) so it applies in both directions — the transition runs on enter AND exit of the state.
<!-- 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>Animating Opacity and Visibility
Fading elements in and out requires transitioning opacity combined with managing visibility or display. CSS transitions cannot animate to or from display: none, so use opacity plus pointer-events-none for simple fade effects. For elements that must truly disappear (removing them from the tab order), combine opacity transitions with JavaScript class toggling.
<!-- 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') -->Transform Transitions
Transform transitions are particularly smooth because they run on the GPU rather than triggering layout recalculations. Tailwind's scale-*, rotate-*, translate-*, and skew-* utilities all animate cleanly with transition-transform. Scale effects on cards and buttons, rotation effects on icons, and slide-in effects on panels all use this approach for best performance.
<!-- 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>Reduced Motion Accessibility
Some users experience motion sickness or seizures from animations and set their OS to Reduce Motion. Tailwind provides the motion-reduce: and motion-safe: variants that activate based on the user's prefers-reduced-motion media query. Use motion-safe: to apply animations only when the user has not requested reduced motion, making your transitions accessible by default.
<!-- 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>Transition on Focus States
Focus transitions are particularly important for keyboard navigation. When a user tabs to an input or button, the focus ring should appear smoothly rather than snapping. Apply transition to all interactive elements so the focus ring transition feels as polished as the hover transition. Include focus:ring-* and focus:ring-offset-* with a transition for the best keyboard experience.
<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"
/>Multiple Transition Properties
You can combine multiple specific transition utilities on a single element to animate only a precise set of properties. Tailwind composes these using the CSS transition-property shorthand. Stacking transition-colors and transition-shadow on the same element makes both colors and shadows animate while leaving other properties (like transforms) instant.
<!-- 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 in Practice: Complete Example
Here is a real-world navigation link with all transitions polished: the background fades in on hover, the text color changes simultaneously, the underline grows from left to right using a scale transform, and focus states match the hover style exactly. Every interaction feels intentional and smooth without a single line of custom 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>Quick Check
Test your understanding of Tailwind's transition utilities.
Lesson Recap
In this lesson you learned: the base transition utility enables smooth animation for common properties, specific transition utilities like transition-colors and transition-transform are more performant than transition-all, and the motion-safe: variant ensures animations only apply when the user has not requested reduced motion. Next up we control transition duration and timing functions.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Utilitas Transisi” gratis?
Ya — teks lengkap “Utilitas Transisi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Tailwind CSS Academy, upgrade ke CoddyKit PRO. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Utilitas Transisi”?
Aktifkan transisi CSS dengan transition-*, lalu pilih properti yang dianimasikan menggunakan transition-colors, transition-transform, dan transition-all. Kamu berlatih Tailwind CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Tailwind CSS Academy?
Tidak diperlukan pengalaman sebelumnya. Tailwind CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Utilitas Transisi” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.