Transisi
cara membuat/implementasi transisi dengan menggunakan css doang itu
cukup mudah, gimana caranya? kita akan bahas langsung abis ini
di css kita tinggal semat beberapa baris kode dalam .class atau
langsung via tag htmlnya atau bisa lewat #id
Untuk menerapkan transisi ada dua step mudah, step pertama kita harus
ada state awal dari si elemen yang mau dikasih transisi, dan juga harus
ada state akhiran dari elemen tersebut, lalu terapkan `transition` pada
css elemennya
/* state elemen awalan */
h1 { color: yellow; transition: color 0.3s ease; }
/* state elemen akhiran, dikombinasikan dengan event tertentu seperti
hover atau yang lain lain*/
h1:hover { color: green; }
transition: [css-property yang mau di transisiin [durasi transisi]
[transisi-timing-function]
.class-transisi { transition: color 0.3s ease; }
biasanya transisi diterapkan untuk beberapa hal, yang paling biasa sih
buat:
-
Button
-
Menu & Navigasi
- Image Hover
- Loading animation
- Merubah Opacity
- Accordion atau Toggle sebuah section
- Modal/Dialog