Transisi: properti, durasi, waktu
Tambahkan transition untuk menganimasikan perubahan properti CSS dengan mulus, pilih durasi yang sesuai, dan gunakan fungsi easing seperti ease-in-out.
Transisi: properti, durasi, waktu adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu Transisi CSS?
Transisi CSS menganimasikan sebuah properti dari satu nilai ke nilai lain saat nilainya berubah (ketika diarahkan, difokuskan, atau saat kelas dialihkan). Transisi bersifat deklaratif—Anda memberi tahu CSS properti mana yang akan ditransisikan dan caranya; peramban melakukan sisanya.
Sintaks Dasar
transition: property duration timing-function delay. Anda dapat mencantumkan beberapa transisi yang dipisahkan dengan koma.
.btn {
background: #6366f1;
transition: background-color 0.2s ease;
}
.btn:hover {
background: #4f46e5;
}
// Browser smoothly animates the colour changeNilai Properti
Tentukan properti mana yang akan ditransisikan. Gunakan all untuk mentransisikan setiap properti yang dapat dianimasikan—tetapi hal ini dapat memicu transisi yang tidak diinginkan pada properti yang tidak terkait. Tentukan properti secara eksplisit demi kinerja dan hasil yang dapat diprediksi.
.card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
opacity 0.15s linear;
}
/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }Durasi — Berapa Lama
Durasi transisi dalam s (detik) atau ms (milidetik). Gunakan durasi singkat (100–200 md) untuk interaksi mikro. Gunakan durasi sedang (200–400 md) untuk perubahan keadaan komponen. Gunakan durasi lebih panjang (400 md+) untuk animasi tingkat halaman.
Fungsi Pewaktuan — Nuansanya
Fungsi pewaktuan mengatur kurva percepatan. Nilai umum: ease (bawaan: awal lambat, bagian tengah cepat, akhir lambat), linear (kecepatan konstan), ease-in (dimulai lambat), ease-out (berakhir lambat), ease-in-out. Kurva khusus: cubic-bezier(x1, y1, x2, y2).
.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }Jeda — Kapan Memulai
Jeda transisi memulai animasi setelah waktu yang ditentukan. Gunakan untuk mengatur beberapa elemen agar mulai secara bergantian atau mencegah pemicu hover yang tidak disengaja saat kursor bergerak cepat.
.dropdown-menu {
opacity: 0;
transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
opacity: 1;
}Peristiwa Berakhirnya Transisi
JavaScript dapat mendengarkan saat transisi selesai melalui peristiwa transitionend. Ini berguna untuk menghapus elemen setelah memudar atau memicu langkah berikutnya dalam suatu rangkaian.
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && element.style.opacity === '0') {
element.remove();
}
});Mentransformasikan Elemen
Properti transform dipercepat oleh GPU dan ideal untuk transisi. Transformasi umum meliputi translate(), scale(), rotate(), dan skew(). Menganimasikan transform dan opacity hanya memicu pengomposisian — jalur tercepat.
.card {
transform: translateY(0) scale(1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}Apa yang Dapat Ditransisikan
Properti apa pun yang memiliki nilai numerik dapat ditransisikan: opacity, warna, transform, lebar, tinggi, padding, border, dan font-size. Properti seperti display dan visibility tidak bertransisi dengan mulus — gunakan opacity sebagai gantinya untuk efek muncul atau memudar.
Praktik: Modal Muncul Perlahan
Modal ini muncul perlahan dan membesar dari ukuran yang sedikit lebih kecil. Terapkan kelas .open dengan JavaScript; CSS menangani animasinya.
.modal {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.modal.open {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}Kinerja: Gunakan Transform dan Opacity
Menganimasikan properti yang memicu tata letak (width, height, margin, top, left) membutuhkan banyak sumber daya — peramban menghitung ulang tata letak pada setiap bingkai. Gunakan transform dan opacity agar animasi 60fps tetap mulus.
Pemeriksaan Singkat
Properti CSS mana yang sebaiknya Anda prioritaskan untuk dianimasikan agar mendapatkan kinerja terbaik?
Rangkuman: Transisi CSS
transition: property duration timing delay. Animasikan properti tertentu, bukan 'all'. Gunakan ease, ease-out, dan ease-in-out untuk gerakan alami. Dengarkan transitionend untuk merangkai tindakan. Gunakan transform dan opacity untuk kinerja yang baik. Gunakan pergantian kelas dalam JS untuk memicu transisi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Transisi: properti, durasi, waktu” gratis?
Ya — teks lengkap “Transisi: properti, durasi, waktu” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Transisi: properti, durasi, waktu”?
Tambahkan transition untuk menganimasikan perubahan properti CSS dengan mulus, pilih durasi yang sesuai, dan gunakan fungsi easing seperti ease-in-out. Kamu berlatih Frontend 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend 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 2 dari 4.
Berapa lama pelajaran “Transisi: properti, durasi, waktu” 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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
- Properti Khusus CSS: mendeklarasikan dan memperbarui
- Transisi: properti, durasi, waktu
- Animasi @keyframes
- Menghormati prefers-reduced-motion