Tombol yang sedikit membesar saat disentuh kursor, kartu yang naik pelan, notifikasi yang meluncur dari atas: semua itu memberi tahu pengguna "aksi kamu terbaca". Gerakan yang pas membuat antarmuka terasa hidup. Gerakan yang berlebihan membuat pusing. Bab ini membahas alatnya dan juga kapan harus menahan diri.

transform mengubah tampilan elemen tanpa menggeser elemen lain di sekitarnya. Browser tetap menyisakan ruang asli elemen di layout, lalu menggambar elemen itu di posisi atau ukuran baru. Analoginya seperti stiker yang kamu geser di atas kertas: garis tulisan di kertas tidak ikut pindah.

.geser   { transform: translate(20px, -10px); }
.besar   { transform: scale(1.2); }
.putar   { transform: rotate(45deg); }
.miring  { transform: skew(10deg, 0deg); }
.gabung  { transform: translateY(-4px) scale(1.05) rotate(3deg); }

Beberapa fungsi bisa digabung dalam satu transform, dan urutannya berpengaruh. translateX(100px) rotate(45deg) menggeser dulu baru memutar di tempat. rotate(45deg) translateX(100px) memutar sumbu dulu, jadi elemen bergerak miring 45 derajat. Satu hal lagi: kalau kamu menulis transform dua kali di aturan berbeda, yang terakhir menimpa semuanya, bukan menambah.

Secara default, transform berporos di tengah elemen (50% 50%). Ubah porosnya dengan transform-origin:

.pintu {
  transform-origin: left center;
  transform: rotateY(60deg);
}
.jarum {
  transform-origin: bottom center;
  transform: rotate(30deg);
}

.pintu berputar seperti daun pintu dengan engsel di kiri. .jarum berputar dari pangkal bawah seperti jarum jam. Coba bayangkan memutar penggaris: hasilnya beda jauh tergantung kamu pegang ujung atau tengahnya.

Tanpa transition, perubahan gaya (misalnya saat :hover) terjadi instan. Transition memberi waktu agar browser menghitung nilai di antaranya.

.tombol {
  background: #1572b6;
  transition: transform 0.3s ease-in-out, background-color 0.2s linear 0.1s;
}
.tombol:hover {
  transform: scale(1.1);
  background: #0d4f80;
}

Shorthand transition berisi empat bagian:

1. property: properti yang dianimasikan, misalnya transform. Bisa all, tapi lebih aman sebut satu per satu.
2. duration: lama perubahan, misalnya 0.3s atau 300ms.
3. timing-function: kurva kecepatan. ease (default) cepat di tengah, linear rata, ease-in pelan di awal, ease-out pelan di akhir, ease-in-out pelan di kedua ujung, atau kurva kustom cubic-bezier().
4. delay: jeda sebelum mulai. Angka waktu pertama selalu dibaca sebagai duration, angka kedua sebagai delay.

Penting: transition dipasang di keadaan awal (.tombol), bukan hanya di :hover. Dengan begitu, animasinya jalan dua arah, saat kursor masuk dan saat keluar. Transition juga hanya bekerja di antara dua nilai yang bisa dihitung. display: none ke block tidak bisa dibuat halus dengan cara biasa, sedangkan opacity: 0 ke 1 bisa.

Transition butuh pemicu dan hanya punya dua titik. Kalau kamu ingin animasi yang jalan sendiri, berulang, atau punya banyak tahap, pakai @keyframes.

@keyframes pantul {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

.bola {
  animation: pantul 1s ease-in-out infinite;
}

@keyframes pantul adalah naskah gerakannya, animation adalah perintah untuk memainkannya. Shorthand di atas sama dengan properti panjang berikut:

.bola {
  animation-name: pantul;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-delay: 0s;
  animation-fill-mode: none;
}

Tiga properti yang sering membingungkan:

• iteration-count: berapa kali diputar. Angka seperti 3, atau infinite untuk tanpa henti.
• direction: normal dari 0% ke 100%, reverse sebaliknya, alternate bolak-balik (maju, mundur, maju), alternate-reverse mulai dari mundur. Dengan alternate, keyframes cukup dua titik untuk efek naik turun.
• fill-mode: gaya apa yang dipakai di luar waktu animasi. forwards mempertahankan keadaan frame terakhir setelah selesai, backwards memakai frame pertama selama masa delay, both gabungan keduanya. Tanpa forwards, elemen yang dianimasikan memudar masuk akan "melompat" kembali ke gaya aslinya begitu animasi berakhir.

@keyframes muncul {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notif {
  animation: muncul 0.4s ease-out 0.2s both;
}

Notifikasi ini tersembunyi selama delay 0.2 detik (berkat backwards di dalam both), meluncur naik, lalu tetap terlihat.

Sebagian orang mengalami pusing atau mual karena gerakan di layar. Sistem operasi menyediakan setelan "kurangi gerakan", dan CSS bisa membacanya:

@media (prefers-reduced-motion: reduce) {
  .bola,
  .notif {
    animation: none;
  }
  .tombol {
    transition: none;
  }
}

Ini bukan hiasan tambahan, ini aksesibilitas dasar. Animasi dekoratif boleh dimatikan total, sedangkan perubahan penting (misalnya status tombol) tetap terjadi, hanya tanpa gerakan.

Setiap kali gaya berubah, browser bisa harus melakukan tiga tahap: layout (menghitung ulang posisi dan ukuran semua elemen), paint (menggambar ulang piksel), dan composite (menyusun lapisan). Mengubah width, top, atau margin memicu layout, yang mahal dan bisa membuat animasi patah-patah di HP murah. transform dan opacity umumnya cukup ditangani di tahap composite, sering oleh GPU.

Jadi, alih-alih menganimasikan left: 0 ke left: 200px, pakai transform: translateX(200px). Alih-alih mengubah width untuk efek membesar, pakai scale().

• Menaruh transition hanya di :hover, sehingga efek kembali ke awal terjadi patah tanpa animasi.
• Menulis dua deklarasi transform lalu heran kenapa rotate hilang. Yang terakhir menimpa, gabungkan dalam satu baris.
• Lupa animation-fill-mode: forwards atau both, sehingga elemen kembali ke gaya semula setelah animasi.
• Menganimasikan width, height, atau top padahal transform bisa memberi efek yang sama dengan lebih ringan.
• Mengabaikan prefers-reduced-motion dan membuat animasi infinite yang mencolok di seluruh halaman.