Transisi & Animasi CSS
Sebuah website yang statis dan kaku terasa membosankan. Pengguna modern mengharapkan tombol yang bereaksi
halus saat disentuh, objek yang muncul dengan gaya, dan antarmuka yang terasa "hidup".
Dulu kita membutuhkan puluhan baris Javascript yang kompleks untuk menggerakkan sebuah kotak. Kini,
CSS3 Transitions & Animations memungkinkan kita menganimasikan elemen HTML langsung dari
mesin rendering browser dengan performa 60 frame-per-detik (60fps) yang sangat mulus!
⏳ CSS Transition (Perubahan Halus)
Transition berfungsi untuk memperlambat proses perubahan nilai pada sebuah properti (misalnya dari warna Biru berubah menjadi Merah) dari yang awalnya instan (langsung ganti), menjadi sebuah proses bertahap.
1. Tanpa Transition
Perubahan kaku & instan. Sangat kasar di mata.
2. Dengan Transition
Bergerak secara perlahan, membesar, memutar, dan berganti warna selama 1 detik.
.tombol-halus {
background: green;
transform: scale(1);
/* ---- INITILAIZE TRANSITION 4 SEKAWAN ---- */
transition-property: all; /* 1. Apa yang dianimasikan? (all=semua perubahan) */
transition-duration: 1s; /* 2. Berapa lama prosesnya? (1 detik) */
transition-timing-function: ease-in-out; /* 3. Gayanya? (Mulai pelan, ngebut, di akhir pelan) */
transition-delay: 0s; /* 4. Ditunda gak mulainya? (0 detik) */
/* Atau, gunakan tulisan cepat (Shorthand): */
transition: all 1s ease-in-out 0s;
}
/* Trigger-nya (Kondisi saat Hover) */
.tombol-halus:hover {
background: darkgreen;
transform: scale(1.2) rotate(6deg); /* Membesar 20% & muter 6 derajat */
}🛠️ Transform: Senjata Manipulasi Fisik
Pada kode di atas, kita melihat properti transform. Ini adalah properti
terbaik di alam semesta CSS karena perubahannya di-render langsung oleh kartu grafis komputermu
(GPU-Accelerated) sehingga tidak akan terjadi patah-patah (lag) meskipun menganimasikan elemen raksasa!
Translate()
(Bergeser X, Y)
Scale()
(Membesar / Mengecil)
Rotate()
(Memutar Derajat)
Skew()
(Mendistorsi / Miring)
Arahkan mouse ke atas kotak-kotak di atas untuk melihat efek `transform` yang dipadukan dengan `transition`.
🎬 Animation & @keyframes (Sutradara Film)
Transition memiliki satu kelemahan besar: Ia butuh *Pemicu/Trigger* (misalnya harus di-hover mouse baru
jalan, kalau mouse pergi dia balik lagi).
Jika kita ingin membuat objek bergerak sendiri berulang-ulang dari titik A ke B ke C lalu kembali ke A tanpa
henti (seperti loading spinner), maka kita harus menggunakan kekuatan penuh @keyframes
Animation.
Cara Kerjanya:
1. Pertama, kita harus "mensutradarai" timeline/skrip filmnya dengan membuat nama @keyframes NAMA_FILM.
2. Kita menentukan adegannya di detik 0% (awal), 50% (tengah), dan 100% (berakhir).
3. Terakhir, pasangkan nama film tersebut ke elemen HTML agar ia memainkannya berulang-ulang tanpa batas
(infinite).
/* 1. SUTRADARA MEMBUAT SKRIP ADEGAN */ @keyframes detakJantung { 0% { transform: scale(1); } 50% { transform: scale(1.5); background: red; } 100% { transform: scale(1); } } /* 2. BERI PERINTAH UNTUK MEMUTAR FILM */ .ikon-love { animation: detakJantung 1s infinite alternate; /* (film) | (waktu 1x putar) | (diulang tiada akhir) */ }
Bergerak Tanpa Henti
Bahkan jika
kursor tidak digerakkan
📋 Ringkasan Sinematik
:hover).
translate), mengubah skala fisik (scale), dan memutar objek (rotate)
dengan mulus berkat bantuan GPU komputer, tidak memberatkan browser (JANGAN animasi
margin/width/height karena berpotensi ngelag lambat).