Halo teman-teman pada kesempatan kali ini kita akan Membuat Animasi Sederhana Menggunakan CSS Filter dan Transition.

Untuk contoh Animasi Sederhana Menggunakan Property CSS Filter dan Transition ini, kita akan menampilkan sebuah gambar hitam putih (grayscale : 100%) lalu, ketika kita mengarahkan pointer kita ke gambar tersebut, maka gambar tersebut akan berubah menjadi warna aslinya (grayscale : 0%).

Nah sudah kebayang belum seperti apa jadinya? Mari kita buat saja contohnya ya teman-teman.

Pertama kita buah struktur dasar HTML dan tambahkan gambar apa saja.

 

Disini saya menggunakan gambar Desert yang sudah disediakan Windows 7 di folder sample pictures. Nah setelah itu kita tambahkan CSSnya. Disini saya akan menambahkan CSS nya seperti dibawah ini:

Dimana disini saya langsung menargetkan langsung ke gambarnya, dan pada CSS pertama kita memberikan efek (filter) hitam putih (grayscale) dengan nilai 100%, dan juga menambahkan transition dengan durasi 2 detik. Dan pada CSS baris kedua saya tambahkan hover, dengan CSS filter grayscale dengan nilai 0%, dan dengan transition dengan durasi 2 detik juga.

Nah disini tujuannya adalah, pada awalnya kita ubah gambarnya menjadi hitam putih, namun ketika kita menghover (mendekatkan pointer) ke gambar tersebut. Maka gambar tersebut akan berubah warnanya menjadi warna yang aslinya. Namun tidak langsung berubah begitu saja, kita menggunakan transition untuk mengatur delay perubahan warnanya.

Demikian contoh Membuat Animasi Sederhana Menggunakan Property CSS Filter dan Transition. Semoga bermanfaat!