◄ Min  Size Fonts: + | - | ± Color: Max ►

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!

post-image

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/

Loading...
XMake Lines Animation using CSS3 Keyframes
Membuat garis dengan efek animasi berjalan menggunakan atribut CSS3 keyframes
Subscribe my posts Register For Free!

11 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE