Make Lines Animation using CSS3 Keyframes

Koben mau berbagi tutorial dengan memakai atribut CSS3 @keyframes Baca dulu dong artikel creativity using css keyframe animations. Sekarang mari membuat sebuah garis tipis, berkedudukan di bawah, bergerak dari arah kiri menuju ke kanan! Hasil karya ini bisa kita pakai untuk memberi sentuhan lebih, agar pengunjung ketika melihat garis yg bergerak akan melihat konten tersebut ;) Dari pada dijelaskan simpang siur jg arah dan tujuan, tengok demo berikut ini!

Bagaimana, sederhana tetapi ajib kan :-bd Sudah tentu dong yah ;))

.serrr{
 width: 55px;
 border-bottom: 5px solid #333;
 position: relative;
 animation: moveleft 5s infinite;
 -moz-animation: moveleft 5s infinite;
 -webkit-animation: moveleft 5s infinite;
 -o-animation: moveleft 5s infinite;
}
@keyframes moveleft{
 from {left:0px;} to {right:200px;}
}
@-moz-keyframes moveleft {
 from {left:0px;} to {left:200px;}
}
@-webkit-keyframes moveleft {
 from {left:0px;} to {left:200px;}
}
@-o-keyframes moveleft {
 from {left:0px;} to {left:200px;}
}

Planing syntax<div class="serrr"></div>Letakin deh apa-apa di atas planing syntax. Aturlah panjang sesuai kebutuhan, dan kode berikut juga from {left:0px;} to {right:200px;}
DONE.

Bonusnya silahkan lihat link berikut pelajari dan have fun, dan gue sudah bingkiskan buat kalian.
www.jsdo.it/haratatu8/jEfC, www.jsdo.it/haratatu8/jUge, www.jsdo.it/haratatu8/qFJS, www.jsdo.it/OpenFlex/jUME, www.jsdo.it/OpenFlex/td2V, www.jsdo.it/OpenFlex/ncrt, www.jsdo.it/OpenFlex/kVUp, www.jsdo.it/OpenFlex/3ImX, www.jsdo.it/OpenFlex/jSfh, www.jsdo.it/OpenFlex/raaB, www.jsdo.it/OpenFlex/xVY8, www.jsdo.it/OpenFlex/jyB0, www.jsdo.it/OpenFlex/rjGf, www.jsdo.it/OpenFlex/mf1Q, www.jsdo.it/OpenFlex/KnnB, www.jsdo.it/OpenFlex/tUzP, www.jsdo.it/OpenFlex/gG6q & www.jsdo.it/OpenFlex/dpDr

Happy blogging \m/