Cara Kilat Menciptakan Efek Transisi pada Semua Elemen

Dibandingkan menuliskan deklarasi CSS Transisi pada elemen-elemen tertentu, untuk beberapa hal Saya lebih suka menuliskan efek transisi pada semua elemen seperti ini:

* {
  -webkit-transition: all 0.26s ease-out;
  -moz-transition: all 0.26s ease-out;
  -o-transition: all 0.26s ease-out;
  transition: all 0.26s ease-out;
}

Nah, untuk selebihnya, jika ingin membuat efek transisi yang berbeda pada elemen yang lebih spesifik bisa menggunakan metode terpisah. Tergantung bagian mana yang ingin dibuat berbeda. Misalnya, kamu ingin membuat efek transisi dengan durasi yang lebih lama pada elemen berupa gambar, maka kamu tinggal menambahkan deklarasi durasi transisi yang berbeda saja pada selektor img{} sehingga hasilnya menjadi kurang lebih seperti ini:

img {
  ...
  ...
  ...
  -webkit-transition-duration:5s;
  -moz-transition-duration:5s;
  -o-transition-duration:5s;
  transition-duration:5s;
}

Pelajari CSS Transisi Selengkapnya