Transisi

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

Secara default, CSS akan langsung mengganti gaya status ini.

Dengan menggunakan transisi CSS, kita dapat melakukan interpolasi antara status awal dan status target elemen. Transisi antara keduanya meningkatkan pengalaman pengguna dengan memberikan panduan, dukungan, dan petunjuk visual tentang sebab dan akibat interaksi.

Properti transisi

Browser Support

  • Chrome: 26.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

Untuk menggunakan transisi di CSS, Anda dapat menggunakan berbagai properti transisi atau properti singkatan transition.

transition-property

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.

transition-duration

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

transition-duration menerima satuan waktu, baik dalam detik (s) maupun milidetik (ms) dan default-nya 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). Namun, transisi linear dapat terlihat agak artifisial: dalam kehidupan nyata, objek memiliki bobot dan tidak dapat berhenti dan dimulai secara instan. Memulai atau mengakhiri transisi secara perlahan dapat membuat transisi Anda lebih hidup dan alami.

Modul kami 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.

Editor pengaturan waktu transisi visual Chrome DevTools.

transisi-jeda

Gunakan properti transition-delay untuk menentukan waktu transisi akan dimulai. Jika transition-delay 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 berurutan, yang dicapai dengan menetapkan transition-delay yang lebih lama untuk setiap elemen berikutnya dalam grup.

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

singkatan: transisi

Seperti sebagian besar properti CSS, ada 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 properti CSS yang dapat dianimasikan di MDN ini.

Secara umum, Anda hanya dapat mentransisikan elemen yang dapat memiliki "status tengah" antara status awal dan akhir. Misalnya, Anda tidak dapat menambahkan transisi untuk font-family, karena tidak jelas seperti apa tampilan "status tengah" antara serif dan monospace. Di sisi lain, Anda dapat menambahkan transisi untuk font-size karena unitnya adalah panjang yang dapat diinterpolasi.

Diagram bentuk yang bertransisi dengan lancar dari satu status ke status lainnya, dan dua baris teks dalam font yang berbeda yang tidak dapat ditransisikan dengan lancar.

Berikut adalah beberapa properti umum yang dapat Anda transisikan.

Transformasi

Browser Support

  • Chrome: 36.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

Properti CSS transform biasanya ditransisikan karena merupakan properti yang dipercepat GPU yang menghasilkan animasi yang lebih lancar dan juga menggunakan lebih sedikit baterai. Properti ini memungkinkan Anda menskalakan, memutar, menerjemahkan, atau memiringkan elemen secara arbitrer.

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 diarahkan kursor. 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 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 berbagai status filter dapat menghasilkan 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 pemicu tersebut adalah pseudo-class :hover. Pseudoclass ini cocok saat pengguna mengarahkan kursor ke elemen.

Berikut adalah daftar beberapa pseudo-class 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 turunannya difokuskan.
  • :target: cocok jika fragmen URL saat ini cocok dengan ID elemen.
  • :active: cocok saat elemen diaktifkan (biasanya saat mouse ditekan di atasnya).
  • Perubahan class dari JavaScript: saat class CSS elemen berubah melalui JavaScript, CSS akan mentransisikan properti yang memenuhi syarat yang telah berubah.

Berbagai transisi untuk masuk atau keluar

Dengan menetapkan properti transition yang berbeda saat mengarahkan 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 tidak cocok untuk semua orang. Bagi sebagian orang, transisi dan animasi dapat menyebabkan mabuk gerak atau ketidaknyamanan. Untungnya, CSS memiliki fitur media yang disebut 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 prefers-reduced-motion: Terkadang lebih sedikit gerakan itu lebih baik untuk mengetahui informasi selengkapnya tentang fitur media ini.

Pertimbangan performa

Saat menggunakan transisi CSS, Anda mungkin mengalami masalah performa jika menambahkan transisi untuk properti CSS tertentu. Misalnya, saat properti seperti width atau height berubah, properti tersebut akan mendorong konten di seluruh halaman. Hal ini memaksa CSS menghitung posisi baru untuk setiap elemen yang terpengaruh untuk setiap frame transisi. Jika memungkinkan, sebaiknya gunakan properti seperti transform dan opacity.

Lihat panduan kami tentang animasi CSS berperforma tinggi untuk mempelajari topik ini lebih lanjut.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang transisi

Properti transisi mana yang digunakan untuk menentukan easing?

transition-duration
transition-cubic-bezier
transition-timing-function
animation-ease
transition-easing

Praktik terbaiknya adalah menggunakan transition-property: all

false
true

Semua properti dapat ditransisikan.

true
false