Transisi

Podcast CSS - 044: Transisi

Saat berinteraksi dengan situs, Anda mungkin melihat bahwa banyak elemen yang memiliki status. Misalnya, dropdown dapat dalam status terbuka atau tertutup. Tombol dapat berubah warna saat diarahkan atau diarahkan ke atasnya. Modal muncul dan hilang.

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 arahan visual, dukungan, dan petunjuk tentang sebab dan akibat dari interaksi.

Istilah penting: Interpolasi adalah proses menciptakan "di antara" langkah-langkah untuk bertransisi dengan lancar dari satu status ke status lainnya.

Properti transisi

Dukungan Browser

• 26
• 12 tahun
• 16
• 9

Sumber

Untuk menggunakan transisi di 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.

Jika ingin, Anda dapat menggunakan transition-property: all untuk menunjukkan bahwa setiap properti harus ditransisikan.

transition-duration

Properti transition-duration digunakan untuk menentukan durasi waktu yang diperlukan untuk menyelesaikan transisi.

transition-duration menerima satuan waktu, baik dalam detik (s) atau milidetik (ms) dan defaultnya adalah 0s.

transition-timing-function

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 linier bisa terlihat buatan: pada kenyataannya, objek memiliki bobot dan tidak dapat berhenti dan langsung dimulai. Melakukan atau keluar dari transisi dapat membuat transisi Anda lebih hidup dan alami.

Modul Animasi CSS kami 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 waktu mulai transisi. 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 yang mengejutkan, yang dicapai dengan menyetel transition-delay yang lebih panjang untuk setiap elemen berikutnya dalam suatu grup.

transition-delay juga berguna untuk proses debug. Menetapkan penundaan ke nilai negatif dapat memulai transisi lebih jauh ke linimasa.

singkatan: 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, hanya mungkin untuk mentransisikan elemen yang memiliki "status tengah" antara status awal dan akhir. Misalnya, transisi untuk font-family tidak mungkin ditambahkan, karena tidak jelas apa yang dimaksud dengan "status tengah" antara serif dan monospace akan terlihat seperti ini. Di sisi lain, Anda dapat menambahkan transisi untuk font-size karena satuannya adalah panjang yang dapat diinterpolasi.

Berikut adalah beberapa properti umum yang dapat Anda transisikan.

Transformasi

Dukungan Browser

• 36
• 12 tahun
• 16
• 9

Sumber

Properti CSS transform biasanya ditransisikan karena merupakan properti dengan akselerasi GPU yang menghasilkan animasi 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 Functions kami.

Warna

Sebelum, selama, dan setelah interaksi, warna dapat menjadi indikator status yang bagus. Misalnya, tombol dapat berubah warna jika kursor 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 di mana warna dapat dialihkan setelah interaksi.

Catatan: Transisi warna biasanya tidak harus berada di belakang preferensi gerakan yang dikurangi. Gunakan penilaian terbaik Anda.

Lihat modul kami tentang warna.

Bayangan

Bayangan sering kali dialihkan untuk menunjukkan perubahan elevasi, misalnya dari fokus pengguna.

Lihat modul kami tentang bayangan.

Filter

filter adalah properti CSS canggih yang memungkinkan Anda menambahkan efek grafis dengan cepat. Bertransisi antara status filter yang berbeda dapat membuat 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 umum dari pemicu semacam ini adalah pseudo-class :hover. Class semu ini cocok saat pengguna mengarahkan kursor ke elemen.

Di bawah ini adalah daftar beberapa kelas semu dan peristiwa yang dapat memicu perubahan status pada elemen Anda.

• :hover: cocok jika kursor berada di atas elemen.
• :focus: cocok jika elemen difokuskan.
• :focus-within : cocok jika elemen atau turunannya tetap fokus.
• :target: cocok saat fragmen URL saat ini cocok dengan ID elemen.
• :active: cocok saat elemen sedang diaktifkan (biasanya saat elemen {i>mouse<i} ditekan di atasnya).
• class perubahan dari JavaScript: saat class CSS elemen berubah melalui JavaScript, CSS akan mentransisikan properti yang memenuhi syarat dan telah berubah.

Transisi yang berbeda untuk masuk atau keluar

Dengan menetapkan properti transition yang berbeda saat kursor diarahkan/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 tidak untuk semua orang. Bagi sebagian orang, transisi dan animasi dapat menyebabkan mabuk gerakan atau ketidaknyamanan. Untungnya, CSS memiliki fitur media bernama prefers-reduced-motion yang mendeteksi apakah pengguna telah menunjukkan preferensi untuk lebih sedikit gerakan dari perangkat mereka.

/*
  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 preferensis-reduced-motion: Terkadang lebih sedikit gerakan lebih baik untuk informasi selengkapnya tentang fitur media ini.

Catatan: Dalam modul Pelajari Aksesibilitas tentang animasi dan gerakan, temukan cara menambahkan keceriaan pada situs Anda tanpa menimbulkan masalah bagi sebagian pengguna.

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 tersebut mendorong konten di bagian lain halaman. Hal ini memaksa CSS untuk menghitung posisi baru bagi setiap elemen yang terpengaruh untuk setiap frame 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 mana yang digunakan untuk menentukan easing?

transition-duration

Coba lagi.

transition-easing

Bukan properti CSS sungguhan.

transition-cubic-bezier

Bukan properti CSS sungguhan.

transition-timing-function

Benar.

animation-ease

Bukan properti CSS sungguhan.

Praktik terbaiknya adalah menggunakan transition-property: all

true

Coba lagi. Menentukan all dapat menyebabkan masalah performa dan transisi yang tidak diinginkan.

salah

Benar. Praktik terbaiknya adalah menentukan setiap properti satu per satu. Kontrol yang lebih akurat akan menghasilkan performa yang lebih baik dan hasil yang lebih dapat diprediksi.

Semua properti dapat ditransisikan.

true

Coba lagi. Properti seperti font-family tidak dapat bertransisi.

salah

Benar. Transisi dapat ditentukan untuk properti yang tidak kompatibel, tetapi akan bertransisi secara terpisah.