Animasi foto genit dengan CSS keyframe

Jika sebelumnya kita telah berhasil membuat animasi foto menjadi berkedip dengan photoshop. Sekarang kita akan mencoba hal yang sama, namun menggunakan tools berbeda, yaitu menggunakan CSS animasi @keyframe.

Sebenarnya konsep dasar dari pembuatan animasi frame by frame, entah menggunakan tools apapun (flash, photoshop) bahkan CSS3 memiliki pola yang sama. Yaitu menggunakan dua atau lebih gambar berbeda dengan dibungkus oleh sebuah bingkai virtual, dimana bingkai ini hanya dapat memuat satu gambar dan akan memuat gambar lain berdasarkan waktu yang telah ditentukan.

Animasi dengan css ini hampir mirip dengan css sprite yang beberapa waktu lalu kita bahas. Bedanya jika css sprite menggunakan properti background-position untuk menggeser gambar, sedangkan yang hendak kita buat menggunakan properti @keyframe dan kelebihannya adalah animasi ini akan terus berjalan tanpa menunggu kursor mouse melewatinya (hover).

Sengaja saya menggunakan foto cewek cantik, sebagai obyek uji coba, sebab saya tau sebuah obyek yang sangat menarik akan membangkitkan semangat belajar yang tinggi -> 

Ada dua foto sebagai modal kita dalam tutorial ini. Foto pertama adalah foto normal sedangkan foto kedua merupakan foto yang nampak berkedip yang sudah saya edit menggunakan photoshop

Catatan Penulis :

Sebelum nya Saya Hanya ingin Memberitahukan Tentang isi Blog Kabar Hoax Official.

Blog yang Berisi Banyak Informasi yang sudah ada sebelumnya (HOAX)

Saya ngeblog hanya untuk pengajaran Bagi diri saya sendiri Dan mengkaji Ulang data tersebut 

ke dalam sebuah blog ( Bukan dalam Arti Copas ) Saya pikir dengan Cara seperti itu 'Pengetahuan yang sebelumnya belum aku ketahui Menjadi saya ketahui'.

Saya pikir Juga Ada baiknya Jika informasi tersebut Berguna Apabila di Sharing.

Pesan Penulis :

Apabila anda sudah Bisa dalam segala hal Berarti Anda Sempurna,Setidaknya Hargai Hasil Karya Orang Lain Baik atau Buruknya Supaya ada timbal Balik Anda Juga di Hargai.