Add Effect Rainbow Animation to The Blog

Bagaimana dengan pembelajaran animatable effect CSS3 animations! Sudah tergiur mau menggunakannya? Sempat mau mentutaskan tutorial yang berbau-bau rainbow is pelangi eh ternyata datang lagi seiring dengan berkembangnya CSS3. Kesempatan sekarang Beben Koben si bloglan anu ganteng kalem tea akan kembali membahas effect rainbow memakai CSS3.
Trick ini didapatkan dari NetMagazine in "A masterclass in CSS animations" article. Ternyata menggunakan variabel CSS 3 Keyframes kita bisa membuat kreasi rainbow animations. Kembali Koben kasih lagi deh source penjelasan oke punya mengenai keyframe animation syntax! Saatnya menanamkan ke dalam blog effect rainbow animation...

DEMO

Effect Rainbow Animation

So blink-blink booo b-)
Biar tidak merubah-rubah unique ID yang ada, sobat harus menemukan unik ID bagian post di template kalian masing² Kalau blogger biasanya memakai uniqueID seperti berikut
.post { BLA BLA BLA }, .post-body { BLA BLA BLA }
Bisa juga loh buat latar belakang template, yang penting kan variabel kodenya
Bila sudah pasti ketemu sisipkan kode CSS3 berikut didalamnya

.post-body {

YOUR OTHERS CODED CSS

-webkit-animation: rainbow 15s 15 linear;
-moz-animation: rainbow 15s 15 linear;
}
@-webkit-keyframes rainbow {
0% {background-color: #FF0000;}
10% {background-color: #FF8000;}
20% {background-color: #FFFF00;}
30% {background-color: #80FF00;}
40% {background-color: #00FF00;}
50% {background-color: #00FF80;}
60% {background-color: #00FFFF;}
70% {background-color: #0080FF;}
80% {background-color: #0000FF;}
90% {background-color: #8000FF;}
100% {background-color: #FF0080;}
}
@-moz-keyframes rainbow {
0% {background-color: #FF0000;}
10% {background-color: #FF8000;}
20% {background-color: #FFFF00;}
30% {background-color: #80FF00;}
40% {background-color: #00FF00;}
50% {background-color: #00FF80;}
60% {background-color: #00FFFF;}
70% {background-color: #0080FF;}
80% {background-color: #0000FF;}
90% {background-color: #8000FF;}
100% {background-color: #FF0080;}
}

Mengerti dong dengan contoh begitu ;))

SAVE
Bila tidak jalan, browsingan belum support, bagian psotingan memakai image/gambar (enggak ngetes kalau yg bergambar) or ada kode salah :D
Good luck \m/