Transisi & Transform
Membuat perubahan tampilan yang halus saat hover dengan transition, serta memutar, memindah, dan memperbesar elemen dengan transform.
Transition: perubahan yang mulus
Biasanya saat kamu mengubah gaya (misalnya warna saat :hover), perubahannya terjadi seketika. Dengan transition, browser menganimasikan perubahan itu secara halus.
.tombol {
background: #3c5a44;
transition: background-color 0.3s ease;
}
.tombol:hover {
background: #cf9d3d;
}Letakkan transition di aturan keadaan awal (bukan di :hover) supaya animasinya berjalan dua arah: saat masuk dan saat keluar.
| Properti | Fungsi | Contoh |
|---|---|---|
transition-property | Properti apa yang dianimasikan | background-color, all |
transition-duration | Lama animasi | 0.3s, 200ms |
transition-timing-function | Irama gerak | ease, linear, ease-in-out |
transition-delay | Tunda sebelum mulai | 0.1s |
Singkatan: transition: properti durasi irama tunda;. Beberapa transisi dipisah koma. Durasi yang nyaman biasanya 150–400ms.
Transform: mengubah bentuk tanpa mengganggu layout
transform memindah, memutar, atau memperbesar elemen secara visual tanpa menggeser elemen lain di sekitarnya.
| Fungsi | Efek |
|---|---|
translate(x, y) / translateX() / translateY() | Geser |
scale(1.2) | Perbesar/perkecil (1 = normal) |
rotate(45deg) | Putar |
skew(10deg) | Miringkan |
.kartu:hover {
transform: translateY(-4px) scale(1.03);
}Beberapa fungsi bisa digabung dalam satu transform (urutan berpengaruh). Titik pusat transformasi diatur dengan transform-origin (bawaan: tengah elemen).
Efek kartu yang naik saat disentuh
.kartu {
box-shadow: 0 2px 6px rgba(0,0,0,.1);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.kartu:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0,0,0,.18);
}Performa: animasikan transform dan opacity bila bisa; keduanya dikerjakan GPU dan sangat mulus. Animasi width, height, atau margin memaksa browser menghitung ulang layout dan terasa patah-patah.
Hormati preferensi pengguna
Sebagian orang merasa pusing oleh gerakan. Matikan animasi bagi mereka:
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}