™Galery™

Saya sebenarnya baru tahu kegunaan CSS @keyframes setelah saya baca dasarnya dari www.w3schools.com, kita bisa membuat animasi dengan perubahan-perubahan CSS yang kita set di keyframes tersebut. Mungkin telat kali ya saya tahu yang beginian, tapi tidak apa-apa daripada tidak sama sekali.
Sekarang yang saya postingkan adalah efek gambar di menu artikel dengan Animasi Gambar Terjatuh. Keyframe ini tidak berfungsi di Explorer dan Opera.
Contoh:

- Pertama yang perlu sobat tentukan adalah DIV dari wadah Artikel Posting dari Blog kawan-kawan Rata-rata memakai nama seperti mainwrapper, content, dll.
- Masih bingung menentukan div class/div id nya ???



Coba klik kanan di halaman artekel  blog sobat, pilih view page source atau lihat kode sumber laman, tekan CTRL+F dan cari dengan kata kunci <div class='title'> (biasanya ada diatasnya) nah seperti yang ada digambar atas <div class='content-padding'> (nama dari class content artikel template blog saya) adalah nama class yang akan kita pakai selanjutnya.

Sekarang ikuti langkah-langkah berikut:

1. Login blogger
2. Rancangan, Edit Html
3. Download Template Lengkap
4. Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya :

.content-padding a img {
animation: imgdown 3s;
-moz-animation: imgdown 3s; /* Firefox */
-webkit-animation: imgdown 3s; /* Safari and Chrome */
-ms-animation: imgdown 3s;
}

@keyframes imgdown
{
from{transform:translate(0px, -9000px)}
to{transform:translate(0px, 0px)}
}
@-moz-keyframes imgdown
{
from{-moz-transform:translate(0px, -9000px)}
to{-moz-transform:translate(0px, 0px)}
}
@-webkit-keyframes imgdown
{
from{-webkit-transform:translate(0px, -9000px)}
to{-webkit-transform:translate(0px, 0px)}
}
@-ms-keyframes imgdown
{
from{-webkit-transform:translate(0px, -9000px)}
to{-webkit-transform:translate(0px, 0px)}
}

Keterangan:

• 3s : berapa detik pemanggilan yang diinginkan
• from{transform:translate(0px, -9000px)} : animasi css awal pemnggilan
• to{transform:translate(0px, 0px)} : animasi css berikutnya setelah yg awal.

yang berwarna biru ganti dengan div class/div id sesuai template blog sobat.
itu cuma 1 dari sekian efek lainnya, sobat bisa coba yang dengan css lain, coba baca disini untuk melihat sedikit penjelasan tentang @keyframes.
5. Simpan template dan lihat hasilnya.

Source code:
- hompimpaalaihumgambreng.blogspot.com
- www.w3schools.com