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;
}
3 Komentar
◄=iNfo_MaSTaH=►
mas bagaimana caranya menerapkan efek transisi ini saat kita membuka blog akan muncul efek ini tolong mas hehe... :-bd
Taufik Nurrohman
Pelajari konsep ini dulu, kalau sudah paham tinggal diimplementasikan ke setiap elemen yang dikehendaki ⇒
Create a Simple Animated Loading Effect with CSS3 Animation
Unknown
Kereen bngeet