Tombol yang berpindah warna seketika saat kursor mengarah terasa kasar: keadaan lama berganti keadaan baru dalam satu frame, tanpa jeda yang bisa diikuti mata. CSS transition menawarkan cara lain. Browser menghitung keadaan-keadaan di antara nilai lama dan nilai baru, lalu menampilkannya bertahap sehingga perubahan terlihat bergerak. Properti pertama yang mengatur perilaku ini adalah transition-property: ia memilih properti CSS mana yang ikut dianimasikan. Pada chapter ini kita membedah cara kerjanya, membedakan properti yang bisa dan tidak bisa dianimasikan, serta melihat cara memeriksanya di DevTools.
Dua Keadaan dan Jarak di Antara Keduanya #
Transition bekerja pada perubahan nilai, bukan pada keadaan statis. Browser membutuhkan dua titik: nilai awal pada keadaan normal, dan nilai baru ketika keadaan berubah — karena :hover, :focus-visible, perubahan class, atau media query. Ketika transition terpasang, setiap kali nilai properti terpilih berpindah, browser menghitung nilai-nilai di antaranya dan menampilkannya satu per satu sepanjang durasi yang diberikan.
.tombol-simpan {
background-color: #1f6f54;
color: #fdfaf3;
transition-property: background-color, color;
transition-duration: 0.25s;
}
.tombol-simpan:hover {
background-color: #14503a;
color: #ffffff;
}Dua tombol berikut menjalankan perubahan warna yang sama persis; yang membedakan hanyalah tombol kedua memasang transition-property beserta durasinya.
Mari kita telaah aturannya:
transition-property: background-color, color;— daftar properti yang dianimasikan. Hanya dua properti ini yang bergerak mulus; perubahan properti lain pada tombol tetap terjadi seketika.transition-duration: 0.25s;— lama gerakan. Tanpa durasi, perubahan tetap seketika karena nilai default-nya 0s; chapter berikutnya membahasnya tuntas.- Blok
:hover— penyedia nilai baru. Transition tidak mendefinisikan warna apa pun; ia hanya mengatur cara dua nilai yang sudah ada dihubungkan.
Memilih Properti yang Dianimasikan #
transition-property menerima kata kunci all atau daftar nama properti dipisah koma:
/* daftar eksplisit: hanya dua properti ini yang bergerak */
.kartu-profil {
transition-property: transform, box-shadow;
}
/* kata kunci all: semua properti yang bisa dianimasikan ikut bergerak */
.kartu-profil-semua {
transition-property: all;
}Daftar eksplisit adalah kebiasaan yang lebih sehat: kita tahu persis properti mana yang bergerak, dan browser tidak perlu menghitung perubahan yang tidak diminta. Chapter Shorthand Transition membahas konsekuensi all secara rinci.
Berikut properti yang paling sering masuk daftar:
| Properti | Peran yang umum |
|---|---|
color, background-color, border-color | perubahan warna teks, latar, dan garis |
opacity | memunculkan dan meredupkan elemen secara halus |
transform | menggeser, memutar, dan memperbesar tanpa memicu perhitungan ulang layout |
box-shadow | efek terangkat pada kartu dan tombol |
Dua properti terakhir menyimpan bonus performa: transform dan opacity tidak memicu reflow, sehingga animasinya murah dihitung browser bahkan pada elemen yang besar.
Tidak Semua Properti Bisa Dianimasikan #
Aturan praktisnya begini: properti bisa dianimasikan bila nilai awal dan nilai akhirnya punya “nilai di antara” yang dapat dihitung browser. Warna memiliki warna di antaranya, dan angka seperti panjang atau opacity memiliki nilai tengah. Browser mengambil kedua ujungnya lalu menghitung tahap demi tahap — proses ini disebut interpolasi.
Sebaliknya, sebagian properti hanya punya dua posisi tanpa keadaan tengah. display hanya mengenal none atau block — tidak ada “setengah block”. font-family tidak memiliki huruf di antara Arial dan Georgia. height dengan nilai auto juga tidak bisa: auto bukan angka, sehingga tidak ada yang dapat dihitung. Properti semacam ini disebut bersifat discrete; bila dipaksa masuk transition, nilainya berganti di tengah durasi tanpa tahapan yang terlihat.
| Properti | Bisa dianimasikan | Alasan |
|---|---|---|
background-color | Ya | warna dapat dipecah menjadi warna-warna di antaranya |
opacity | Ya | angka 0 sampai 1 dapat dipecah bertahap |
height (nilai px) | Ya | panjang eksplisit dapat dihitung bertahap |
height (nilai auto) | Tidak | auto bukan angka, tidak ada yang bisa dihitung |
display | Tidak | tidak ada keadaan di antara none dan block |
font-family | Tidak | tidak ada font di antara dua font |
Memeriksa Properti di DevTools #
Cara cepat menguji sebuah properti: pasang transition pada elemen, buka panel Styles di DevTools, lalu ubah nilai properti itu secara langsung. Bila nilainya berpindah bertahap, properti tersebut bisa dianimasikan; bila melompat seketika, tidak. Sebagai bonus, nilai transition-timing-function di panel Styles menampilkan ikon kurva yang bisa diklik untuk membuka editor cubic-bezier — kita akan memakainya pada chapter berikutnya.
Kesalahan Umum #
| Kesalahan | Akibatnya | Perbaikan |
|---|---|---|
transition hanya ditulis di dalam :hover | gerakan terjadi saat kursor masuk, tetapi patah seketika saat keluar karena keadaan dasar tidak punya aturan transition | tulis transition pada keadaan dasar agar dua arah sama-sama bergerak |
transition-property ditulis tanpa transition-duration | tidak ada efek sama sekali, karena durasi default-nya 0s | isi durasi, sekecil apa pun |
mengandalkan all di semua komponen | perubahan yang tidak diinginkan ikut bergerak dan biaya render naik | sebut properti secara eksplisit |
Ringkasan #
transition-property memilih properti mana yang bergerak mulus ketika nilainya berpindah antara dua keadaan. Properti dengan nilai yang dapat dihitung bertahap — warna, angka, transform — bisa dianimasikan, sedangkan display dan font-family berpindah seketika. Memilih properti saja belum cukup untuk menghasilkan gerakan: tanpa durasi, semuanya tetap terjadi dalam sekejap. Chapter berikutnya mengisi bagian itu dengan transition-duration.