CSS Transitions dan Animations
CSS27 Agustus 2026Diperbarui 3 September 20266 menit baca
Jadikan Sumber Pilihan di Google Search
Dapatkan tutorial, materi, dan dokumentasi Mahir.dev lebih mudah di Google Search dan AI Overviews.
CSS Transitions dan Animations
Transitions dan animations sama-sama dipakai untuk memberi gerak pada UI, tetapi tujuan dan kontrolnya berbeda.
- Transition cocok untuk perpindahan yang dipicu perubahan state yang jelas, misalnya hover, focus, class toggle, atau perubahan nilai dari JavaScript.
- Animation cocok untuk gerakan yang lebih kompleks, berulang, atau perlu kontrol penuh atas beberapa tahap gerak.
Kalau dipilih dengan tepat, keduanya membuat UI terasa lebih halus dan lebih mudah dipahami. Kalau dipakai berlebihan, efeknya justru sebaliknya: UI terasa ramai, melelahkan, dan sulit diprediksi.
Kapan pakai transition
Pakai transition saat perubahan yang ingin dianimasikan adalah transisi sederhana dari keadaan A ke B.
Contoh umum:
- hover tombol
- focus state pada input
- perubahan warna link
- perubahan ukuran, opacity, atau bayangan kartu
- buka/tutup panel yang dibantu perubahan class
transition paling enak dipakai ketika:
- perubahan hanya terjadi di antara dua state yang jelas
- durasi gerak pendek
- kamu ingin efek yang halus tanpa menulis banyak keyframe
- perubahan cukup dideskripsikan dengan “dari nilai lama ke nilai baru”
Contoh:
css.button {
transition: background-color 160ms ease, transform 160ms ease;
}
.button:hover {
background-color: #2563eb;
transform: translateY(-1px);
}Di sini, browser menginterpolasi nilai lama ke nilai baru. Kamu tidak perlu mendefinisikan tahap tengah secara eksplisit.
Kapan pakai @keyframes
Pakai @keyframes saat gerakan perlu lebih dari sekadar transisi dua state.
Contoh umum:
- loading spinner
- pulse atau shimmer
- bounce kecil untuk menarik perhatian
- animasi masuk yang terdiri dari beberapa tahap
- efek berulang
- sequence gerak yang tidak langsung berasal dari perubahan satu properti
@keyframes cocok ketika:
- ada beberapa titik kontrol di sepanjang durasi animasi
- animasi harus berjalan sendiri, bukan hanya saat state berubah
- kamu butuh loop, delay, direction, fill-mode, atau iteration count
- gerak harus lebih ekspresif daripada sekadar halus
Contoh:
css.loader {
animation: spin 900ms linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360
Alur memilih transition vs animation
Loading diagram...
Aturan praktisnya sederhana:
- transition = perubahan state yang natural dan singkat
- animation = gerak yang lebih penuh kontrol
Dampak pada UX
Animasi yang baik bukan cuma dekorasi. Ia membantu pembaca memahami apa yang berubah di layar.
Efek UX yang positif
- memberi affordance: pengguna lebih mudah menangkap elemen yang bisa diklik atau aktif
- menjelaskan perubahan state: misalnya panel yang membuka diri terasa sebagai satu rangkaian, bukan loncatan mendadak
- mengurangi rasa “pop”: perubahan visual yang terlalu instan bisa terasa kasar
- mengarahkan perhatian: animasi halus bisa membantu fokus ke elemen penting
Efek UX yang negatif kalau berlebihan
- mengganggu fokus baca: gerakan yang terus muncul membuat mata sulit berhenti
- menambah beban kognitif: pengguna harus memproses gerak yang tidak penting
- terasa lambat: animasi yang terlalu panjang memberi kesan UI berat
- memicu rasa tidak nyaman: efek besar, kontras tinggi, atau gerak berulang bisa melelahkan
Kalau animasinya tidak punya fungsi, biasanya ia lebih banyak menghabiskan perhatian daripada membantu.
Properti yang umum dianimasikan
Tidak semua properti sama murahnya untuk dianimasikan.
Umumnya aman dan umum dipakai
transformopacitycolorbackground-colorbox-shadowdengan hati-hatifilterdengan hati-hati
Perlu kehati-hatian
widthheighttop,left,right,bottommarginpaddingborder-widthmax-height
Properti layout seperti width dan height sering memicu reflow dan repaint yang lebih mahal daripada transform dan opacity. Untuk efek visual yang sama, biasanya lebih stabil kalau memakai transformasi.
Contoh pendekatan yang lebih aman:
css.card {
transition: transform 180ms ease, opacity 180ms ease;
}
.card.is-entering {
transform: translateY(8px);
opacity: 0;
}Properti yang tidak bisa dianimasikan
Ada juga properti yang pada praktiknya tidak bisa dianimasikan secara mulus atau tidak memberi hasil yang berguna untuk animasi.
Contoh yang sering menjebak:
displaypositionfloatautopada banyak konteks ukuran dan posisi- perubahan nilai yang bersifat diskret, bukan numerik
Misalnya, display: none tidak bisa ditransisikan menjadi display: block dengan transition biasa. Solusinya biasanya bukan memaksa animasi di display, melainkan menggabungkan opacity, transform, visibility, atau pengaturan height yang dirancang hati-hati.
Jebakan umum
1. Animasi terlalu ramai
Terlalu banyak elemen yang bergerak sekaligus membuat UI terasa bising.
Tanda-tandanya:
- setiap hover memunculkan efek yang berbeda-beda
- semua kartu, tombol, dan ikon punya gerakan sendiri
- gerak dipakai untuk semua hal, bukan untuk penanda penting
Prinsip amannya: animasi harus mendukung hierarki visual, bukan bersaing dengannya.
2. Durasi dan easing tidak konsisten
Kalau satu bagian bergerak cepat, bagian lain lambat, dan easing-nya acak, UI terasa tidak rapi.
Pakai skala yang konsisten untuk elemen sejenis. Contoh:
- micro-interaction: 120–180ms
- perubahan panel kecil: 180–240ms
- transisi yang lebih berat: 240–320ms
Angka ini bukan hukum, tapi cukup bagus sebagai titik awal.
3. Memakai animasi untuk feedback yang seharusnya instan
Contoh:
- validasi form yang harus segera memberi tahu error
- toggle yang perlu respons cepat
- aksi penting yang tidak boleh terasa “nahan”
Kalau feedback inti tertunda terlalu lama, pengguna mengira aplikasinya lambat.
4. Mengandalkan properti layout padahal cukup transform
Banyak efek bisa ditulis dengan translate, scale, atau opacity tanpa menyentuh layout. Ini biasanya lebih ringan dan lebih stabil.
5. Lupa aksesibilitas gerak
Tidak semua pengguna nyaman dengan animasi. Untuk kasus tertentu, sediakan jalur yang menghormati preferensi motion pengguna.
Contoh pendekatan:
css@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}Isi detailnya bisa disesuaikan, tapi intinya jelas: jangan paksa motion pada pengguna yang meminta pengurangan animasi.
Ringkasan pilihan praktis
- Pakai transition untuk perubahan state sederhana dan singkat.
- Pakai keyframes untuk gerak yang bertahap, berulang, atau butuh kontrol penuh.
- Utamakan
transformdanopacitykalau tujuanmu efek visual yang halus. - Hindari animasi di properti layout kalau ada alternatif yang lebih ringan.
- Jangan beri gerak pada semua elemen; pilih yang benar-benar membantu UX.