Animasi Khusus dalam Konfigurasi
Definisikan keyframe khusus dan utilitas animasi dalam tailwind.config.js, lalu rujuk menggunakan kelas animate-* di markup Anda.
Animasi Khusus dalam Konfigurasi adalah pelajaran Tailwind CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Melampaui Empat Animasi Bawaan
Empat animasi bawaan Tailwind mencakup pola pemuatan dan penarik perhatian yang umum, tetapi proyek nyata sering memerlukan animasi tambahan: efek memudar masuk untuk kemunculan konten, bilah samping yang meluncur masuk, efek guncangan untuk kesalahan formulir, atau variasi denyutan kustom. Dengan menambahkan entri ke theme.extend.keyframes dan theme.extend.animation dalam konfigurasi Anda, Anda membuat utilitas animate-* baru yang bekerja persis seperti utilitas bawaan.
Menentukan Bingkai Kunci Kustom
Tambahkan bingkai kunci CSS kustom di theme.extend.keyframes. Setiap kunci dalam objek menjadi nama bingkai kunci. Nilainya adalah objek yang kuncinya berupa string persentase atau kata kunci 'from'/'to', sedangkan nilainya berupa objek properti CSS. Tailwind mengonversi notasi objek ini menjadi aturan CSS @keyframes dalam keluaran yang dikompilasi. Anda dapat menggunakan properti CSS apa pun yang dapat dianimasikan di dalam langkah-langkah bingkai kunci.
// 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)' },
},
},
},
},
};Mendaftarkan Utilitas Animasi Kustom
Setelah menentukan bingkai kunci, daftarkan bingkai tersebut sebagai animasi bernama di theme.extend.animation. Nilainya adalah string singkat animasi CSS: name duration timing-function delay iteration-count direction fill-mode. Namanya harus cocok dengan bingkai kunci yang ditentukan di theme.extend.keyframes. Tailwind menghasilkan kelas utilitas animate-{key} untuk setiap entri.
// 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',
},
},
},
};Menggunakan Animasi Kustom dalam HTML
Setelah didaftarkan dalam konfigurasi, animasi khusus tersedia sebagai kelas animate-{key} di HTML Anda. Kelas tersebut bekerja sama persis seperti utilitas animate bawaan dan dapat digabungkan dengan awalan responsif, varian state, serta varian motion-reduce: untuk aksesibilitas. Animasi berjalan saat kelas tersebut ada dan berhenti saat kelas dihapus — sangat cocok untuk efek kemunculan yang dipicu oleh 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"
/>Animasi Kemunculan untuk Konten
Animasi kemunculan (memudar masuk, bergeser ke atas, membesar masuk) membuat konten terasa lebih hidup saat muncul. Animasi ini paling efektif ketika konten pertama kali memasuki area tampilan — saat halaman dimuat atau ketika suatu bagian menjadi terlihat saat menggulir. Pertahankan durasi kemunculan antara 200–400 md dan selalu padukan dengan easing yang sesuai. Gunakan API Intersection Observer dalam JavaScript untuk memicu animasi saat elemen masuk ke area tampilan ketika halaman digulir.
// 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>Contoh Keyframe yang Lebih Kompleks
Animasi kompleks menggunakan lebih banyak tahapan persentase keyframe untuk menciptakan gerakan bertahap. Animasi detak jantung membesar lalu mengecil kembali dengan irama dua detakan. Animasi kilatan menyorot elemen secara singkat dengan warna latar. Animasi geser masuk dari kanan menggeser dan memudarkan elemen secara bersamaan. Animasi gabungan ini memerlukan beberapa tahapan persentase untuk menjelaskan setiap tahap gerakan secara tepat.
// 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',
}Mode Pengisian Animasi
Properti CSS animation-fill-mode mengatur apa yang terjadi sebelum animasi dimulai (jika terdapat jeda) dan setelah animasi berakhir. forwards mempertahankan elemen dalam state akhirnya setelah animasi berakhir — hal yang penting untuk animasi kemunculan sekali jalan ketika Anda ingin elemen tetap terlihat. backwards menerapkan bingkai pertama selama periode jeda agar elemen dimulai dari state awal yang benar. Sertakan mode pengisian dalam string singkat animasi Anda.
// 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',
}Menjeda dan Melanjutkan Animasi
Anda dapat menjeda animasi Tailwind menggunakan animation-play-state: paused. Tambahkan kelas utilitas khusus atau gunakan nilai arbitrer: [animation-play-state:paused]. Cara ini berguna untuk menjeda animasi pemuatan saat halaman tidak terlihat (menggunakan API Visibilitas Halaman) atau menjeda animasi hover agar pengguna memiliki waktu untuk berinteraksi dengan konten. Tailwind tidak memiliki utilitas jeda bawaan, tetapi CSS arbitrer atau utilitas khusus dapat memenuhi kebutuhan ini.
@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';
});
});Menghormati Gerakan yang Dikurangi dalam Animasi Khusus
Setiap animasi khusus yang Anda buat juga harus memiliki penanganan motion-reduce:. Pendekatan paling sederhana adalah motion-reduce:animate-none untuk menonaktifkan animasi sepenuhnya. Untuk animasi kemunculan yang tetap ingin menampilkan state akhir, gunakan motion-reduce:opacity-100 bersama motion-reduce:animate-none untuk memastikan elemen terlihat meskipun animasi memudar masuk dilewati.
<!-- 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>Pustaka Animasi Pihak Ketiga dengan Tailwind
Untuk animasi yang lebih canggih — fisika pegas, animasi yang digerakkan oleh pengguliran, atau koreografi kompleks — pustaka pihak ketiga seperti tailwindcss-animate, Framer Motion (React), atau GSAP terintegrasi dengan baik dengan Tailwind. Tailwindcss-animate menyediakan kumpulan keyframe siap pakai yang kaya (accordion-down, accordion-up, fade-in, dan sebagainya) sebagai plugin, sehingga langsung memperluas utilitas animate-* yang tersedia. Pustaka ini digunakan secara bawaan pada komponen shadcn/ui.
// 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>Men-debug Animasi Khusus
Gunakan panel Animations di Chrome DevTools untuk memeriksa dan men-debug animasi khusus. Pilih elemen di panel Elements, lalu buka panel Animations. Jalankan animasi dan Anda akan melihat kurva keyframe yang divisualisasikan dengan penanda waktu. Anda dapat memperlambat pemutaran hingga kecepatan 0,25x untuk memeriksa setiap tahap dengan saksama. Panel ini juga memungkinkan Anda memutar ulang animasi sesuai kebutuhan, yang jauh lebih mudah daripada memuat ulang halaman untuk menangkap animasi kemunculan.
Pemeriksaan Singkat
Uji pemahaman Anda tentang animasi khusus dalam konfigurasi Tailwind.
Ringkasan Pelajaran
Dalam pelajaran ini Anda telah mempelajari: mendefinisikan keyframe khusus di theme.extend.keyframes dan mendaftarkannya sebagai utilitas di theme.extend.animation, menggunakan animation fill-mode forwards untuk animasi kemunculan sekali jalan yang harus mempertahankan state akhirnya, serta selalu memadukan animasi khusus dengan motion-reduce:animate-none untuk aksesibilitas. Kursus Animations and Transitions ini selesai — selanjutnya kita akan membuat pola komponen yang lebih rapi.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Animasi Khusus dalam Konfigurasi” gratis?
Ya — teks lengkap “Animasi Khusus dalam Konfigurasi” 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 “Animasi Khusus dalam Konfigurasi”?
Definisikan keyframe khusus dan utilitas animasi dalam tailwind.config.js, lalu rujuk menggunakan kelas animate-* di markup Anda. 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 4 dari 4.
Berapa lama pelajaran “Animasi Khusus dalam Konfigurasi” 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.
Semua pelajaran dalam kursus ini
- Utilitas Transisi
- Durasi dan Pelonggaran
- Animasi Keyframe Bawaan
- Animasi Khusus dalam Konfigurasi