Podcast CSS - 044: Transisi
Saat berinteraksi dengan situs, Anda mungkin melihat bahwa banyak elemen memiliki state. Misalnya, dropdown dapat dalam status terbuka atau tertutup. Tombol dapat berubah warna saat difokuskan atau diarahkan ke atasnya. Modal muncul dan menghilang.
Secara default, CSS mengalihkan gaya status ini secara instan.
Dengan menggunakan transisi CSS, kita dapat menginterpolasi antara status awal dan status target elemen. Transisi di antara keduanya meningkatkan pengalaman pengguna dengan memberikan arah visual, dukungan, dan petunjuk tentang sebab dan akibat dari interaksi.
Properti transisi
Untuk menggunakan transisi dalam CSS, Anda dapat menggunakan berbagai properti transisi atau properti singkat transition
.
properti transisi
Properti transition-property
menentukan gaya yang akan ditransisikan.
.my-element {
transition-property: background-color;
}
transition-property
menerima satu atau beberapa nama properti CSS dalam daftar yang dipisahkan koma.
Secara opsional, Anda dapat menggunakan transition-property: all
untuk menunjukkan bahwa setiap properti harus ditransisikan.
durasi-transisi
Properti transition-duration
digunakan untuk menentukan durasi waktu yang diperlukan untuk menyelesaikan transisi.
transition-duration
menerima satuan waktu, baik dalam detik (s
) maupun milidetik (ms
) dan setelan defaultnya adalah 0s
.
fungsi waktu transisi
Gunakan properti transition-timing-function
untuk memvariasikan kecepatan transisi CSS selama transition-duration
.
Secara default, CSS akan mentransisikan elemen Anda dengan kecepatan konstan (transition-timing-function: linear
). Transisi linear dapat terlihat agak palsu: dalam kehidupan nyata, objek memiliki bobot dan tidak dapat berhenti dan dimulai seketika. Easing ke atau dari transisi dapat membuat transisi Anda lebih hidup dan alami.
Modul tentang Animasi CSS memiliki ringkasan yang baik tentang fungsi pengaturan waktu.
Anda dapat menggunakan DevTools untuk bereksperimen dengan berbagai fungsi pengaturan waktu secara real time.
penundaan-transisi
Gunakan properti transition-delay
untuk menentukan kapan transisi akan dimulai. Jika transition-duration
tidak ditentukan, transisi akan langsung dimulai karena nilai defaultnya adalah 0s
. Properti ini menerima satuan waktu, misalnya detik (s
) atau milidetik (ms
).
Properti ini berguna untuk transisi mengejutkan, yang dicapai dengan menyetel transition-delay
yang lebih panjang untuk setiap elemen berikutnya dalam grup.
transition-delay
juga berguna untuk proses debug. Menetapkan penundaan ke nilai negatif dapat memulai transisi lebih jauh ke rentang waktu.
singkat: transisi
Seperti kebanyakan properti CSS, terdapat versi singkat. transition
menggabungkan transition-property
, transition-duration
, transition-timing-function
, dan transition-delay
.
.longhand {
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.shorthand {
transition: transform 300ms ease-in-out 0s;
}
Apa yang dapat dan tidak dapat ditransisikan?
Saat menulis CSS, Anda dapat menentukan properti mana yang harus memiliki transisi animasi. Lihat daftar MDN properti CSS yang dapat dianimasikan ini.
Secara umum, Anda hanya dapat mentransisikan elemen yang memiliki "status tengah" antara status awal dan akhirnya. Misalnya, tidak mungkin menambahkan transisi untuk font-family
, karena tidak jelas seperti apa "status tengah" antara serif
dan monospace
seharusnya terlihat. Di sisi lain, Anda dapat menambahkan transisi untuk font-size
karena unitnya adalah panjang yang dapat diinterpolasi.
Berikut adalah beberapa properti umum yang dapat Anda transisikan.
Ubah bentuk
Properti CSS transform
biasanya ditransisikan karena merupakan properti yang diakselerasi oleh GPU yang menghasilkan animasi yang lebih halus dan juga mengonsumsi lebih sedikit daya baterai. Properti ini memungkinkan Anda menskalakan, memutar, menerjemahkan, atau memiringkan elemen secara bebas.
Lihat bagian tentang transformasi di modul Fungsi kami.
Warna
Sebelum, selama, dan setelah interaksi, warna dapat menjadi indikator status yang bagus. Misalnya, tombol dapat berubah warna jika sedang diarahkan ke atasnya. Perubahan warna ini dapat memberikan masukan kepada pengguna bahwa tombol dapat diklik.
Properti color
, background-color
, dan border-color
hanyalah beberapa tempat tempat warna dapat
ditransisikan setelah interaksi.
Lihat modul kami tentang warna.
Bayangan
Bayangan sering kali ditransisikan untuk menunjukkan perubahan elevasi, seperti dari fokus pengguna.
Lihat modul kami tentang bayangan.
Filter
filter
adalah properti CSS yang canggih yang memungkinkan Anda menambahkan efek grafis dengan cepat. Bertransisi di antara status filter
yang berbeda dapat menciptakan beberapa hasil yang cukup mengesankan.
Lihat modul kami tentang filter.
Pemicu transisi
CSS Anda harus menyertakan perubahan status dan peristiwa yang memicu perubahan status tersebut agar transisi CSS dapat diaktifkan. Contoh standar dari pemicu tersebut adalah class semu :hover
. Class pseudo ini cocok saat pengguna mengarahkan kursor ke elemen.
Di bawah ini adalah daftar beberapa class pseudo dan peristiwa yang dapat memicu perubahan status di elemen Anda.
:hover
: cocok jika kursor berada di atas elemen.:focus
: cocok jika elemen difokuskan.:focus-within
: cocok jika elemen atau salah satu turunannya difokus.:target
: cocok jika fragmen URL saat ini cocok dengan ID elemen.:active
: cocok dengan saat elemen sedang diaktifkan (biasanya saat mouse ditekan di atasnya).class
berubah dari JavaScript: saatclass
CSS elemen berubah melalui JavaScript, CSS akan mentransisikan properti yang memenuhi syarat yang telah berubah.
Transisi yang berbeda untuk masuk atau keluar
Dengan menetapkan properti transition
yang berbeda pada pengarahan kursor/fokus, Anda dapat membuat beberapa efek yang menarik.
.my-element {
background: red;
/* This transition is applied on the "exit" transition */
transition: background 2000ms ease-in;
}
.my-element:hover {
background: blue;
/* This transition is applied on the "enter" transition */
transition: background 150ms ease;
}
Pertimbangan aksesibilitas
Transisi CSS bukan untuk semua orang. Bagi sebagian orang, transisi dan animasi dapat menyebabkan mabuk gerak atau ketidaknyamanan. Untungnya, CSS memiliki fitur media bernama prefers-reduced-motion
yang mendeteksi apakah pengguna telah menunjukkan preferensi untuk lebih sedikit gerakan dari perangkatnya.
/*
If the user has expressed their preference for
reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
.my-element {
transition: none;
}
}
/*
If the browser understands the media query and the user
explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
.my-element {
transition: transform 250ms ease;
}
}
Lihat postingan blog kami prefers-reduced-motion: Terkadang lebih sedikit gerakan itu lebih baik untuk informasi selengkapnya tentang fitur media ini.
Pertimbangan performa
Saat menangani transisi CSS, Anda mungkin mengalami masalah performa jika menambahkan transisi untuk properti CSS tertentu. Misalnya, saat properti seperti width
atau height
berubah, properti akan didorong ke bagian lain halaman. Hal ini memaksa CSS menghitung posisi baru bagi setiap elemen yang terpengaruh untuk setiap bingkai transisi. Jika memungkinkan, sebaiknya gunakan properti seperti transform
dan opacity
.
Lihat panduan tentang animasi CSS berperforma tinggi untuk mempelajari topik ini secara mendalam.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang transisi
Properti transisi manakah yang digunakan untuk menentukan easing?
transition-duration
transition-easing
transition-cubic-bezier
transition-timing-function
animation-ease
Praktik terbaiknya adalah menggunakan transition-property: all
all
dapat menyebabkan masalah performa dan transisi yang tidak diinginkan.Semua properti dapat ditransisikan.
font-family
tidak dapat ditransisikan.