Membuat Animasi Dengan Efek Berputar Pada CSS3
Dunia Programming - Halo sahabat setia Dunia Programming, kali ini saya akan membahas sedikit tentang bagaimana sih caranya kita membuat animasi dengan CSS3, dan animasi kali ini, kita akan buat dengan efek yang pastinya berbeda dengan yang dulu saya pernah bahas, untuk kalian yang belum tau atau tertinggal dnegan tutorial saya, bisa baca-baca tutorial tentang cara membuat animasi dengan CSS3
Apasih kelebihan membuat animasi dari CSS3...? padahal kalau kita membuat animasi dari Photoshop, Photoscape, Macromedia Flash atau yang lain kan juga bisa....?
 |
| CSS3 - Animasi Berdenyut |
Nah, untuk kelebihan CSS3 sendiri adalah, meringankan web kita saat melakukan load, bayangkan saja, file atau gambar yang kalian tampilan itu besar, dan ditambah lagi animasi bawaan yang sudah kalian buat dari Photoshop atau pun yang lainnya.
Secara otomatis, load website kalian akan menjadi lama, dan juga proses pembuatan animasi kalian akan memakan banyak waktu.
Bagaimana kalian kalau dalam kondisi sedang dalam perlombaan...? apakah mau buang-buang waktu demi animasi 1 gambar saja...? pasti tidak kan, makanya CSS3 memunculkan beberapa fitur animasi, agar para Web Developer atau Programmer dapat lebih muda, cepat dan menghemat waktu dalam proses pengkodingan.
Oke, kali ini kita akan membuat animasi berputar dengan CSS3, sesuai dengan permintaan dari para pecinta Dunia Programming, Oke langsung saja kita mulai tutorialnya.
misalkan kalian ingin memberi efek pada logo blog kalian, atau memberi efek denyut pada suatu obyek yang ada di blog kalian, kalian bisa ikuti cara-cara dibawah ini
Penulisan awal akan nampak seperti dibawah ini :
Script HTML
<img src="Link gambar kalian" alt="Dunia Programming">
setelah itu, kita beri class atau id pada bagian dalam tag img menjadi seperti ini :
Script HTML
<img src="Link gambar kalian" alt="Dunia Programming" class="putar">
Lalu, kita tambahkan script CSS3 nya dibawah ini, letakkan dibagian mana saja, bisa link external maupun internal :
Script CSS3
.putar-kiri {
-moz-animation: rota-full-left 20s infinite linear;
-webkit-animation: rota-full-left 20s infinite linear;
}
@-moz-keyframes rota-full-left {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(-360deg);}
}
@-webkit-keyframes rota-full-left {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(-360deg);}
}
-moz-animation: rota-full-left 20s infinite linear;
-webkit-animation: rota-full-left 20s infinite linear;
}
@-moz-keyframes rota-full-left {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(-360deg);}
}
@-webkit-keyframes rota-full-left {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(-360deg);}
}
Untuk source code lengkapnya bisa kalian copy pada bagian bawah ini, dan beri nama index.html :
Script CSS3
<!doctype html>
<html>
<head>
<title>Dunia Programming</title>
<style type="text/css">
.putar-kiri {
-moz-animation: rota-full-left 20s infinite linear;
-webkit-animation: rota-full-left 20s infinite linear;
}
@-moz-keyframes rota-full-left {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(-360deg);}
}
@-webkit-keyframes rota-full-left {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(-360deg);}
}
</style>
<body>
<img src="Link Gambar kalian" alt="Dunia Proramming" class="putar-kiri">
</body>
</html>
<html>
<head>
<title>Dunia Programming</title>
<style type="text/css">
.putar-kiri {
-moz-animation: rota-full-left 20s infinite linear;
-webkit-animation: rota-full-left 20s infinite linear;
}
@-moz-keyframes rota-full-left {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(-360deg);}
}
@-webkit-keyframes rota-full-left {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(-360deg);}
}
</style>
<body>
<img src="Link Gambar kalian" alt="Dunia Proramming" class="putar-kiri">
</body>
</html>
setelah semua langkah diatas kalian lakukan, selanjutnya simpan file lengkap tadi tadi dengan nama index.html, dan buka file tadi, dan hasilnya akan nampak seperti pada gambar dibawah ini :
Bagaimana kawan...? keren bukan, pastinya dong.
"Wah, gambar diatas sudah berputar ya, tapi kalau dibuat berputar ke arah kanan gimana ya...?"Oke seperti halnya source code di atas, akan tetapi ada sedikit perbedaan dengan script diatas, caranya gimana..?
Script CSS3
.putar-kanan {
-moz-animation: rota-full-right 3s infinite linear;
-webkit-animation: rota-full-right 3s infinite linear;
}
@-moz-keyframes rota-full-right {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes rota-full-right {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
-moz-animation: rota-full-right 3s infinite linear;
-webkit-animation: rota-full-right 3s infinite linear;
}
@-moz-keyframes rota-full-right {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes rota-full-right {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
untuk source code lengkapnya akan nampak seperti dibawah ini :
Script CSS3
<!doctype html>
<html>
<head>
<title>Dunia Programming</title>
<style type="text/css">
.putar-kanan {
-moz-animation: rota-full-right 3s infinite linear;
-webkit-animation: rota-full-right 3s infinite linear;
}
@-moz-keyframes rota-full-right {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes rota-full-right {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}</style>
<body>
<img src="Link Gambar kalian" alt="Dunia Proramming" class="putar-kiri">
</body>
</html>
<html>
<head>
<title>Dunia Programming</title>
<style type="text/css">
.putar-kanan {
-moz-animation: rota-full-right 3s infinite linear;
-webkit-animation: rota-full-right 3s infinite linear;
}
@-moz-keyframes rota-full-right {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes rota-full-right {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}</style>
<body>
<img src="Link Gambar kalian" alt="Dunia Proramming" class="putar-kiri">
</body>
</html>
Dan hasilnya akan nampak seperti pada gambar dibawah ini :
Bagaimana...? keren kan kan...? hahahaha, pastinya dongs, nantikan efek animasi CSS3 lainnya di Dunia Programming, semoga apa yang saya jelaskan diatas bisa bermanfaat bagi kalian semua.
Bagi kalian yang ingin tau apa aja sih yang nantinya akan dibuat oleh Dunia Programming tentang Animasi dengan menggunakan CSS3, silahkan kalian dapat membaca artikel dibawah ini :
Baca Juga :
Belajar Membuat Animasi dengan CSS3
Sekian tutorial mengenai cara membuat animasi dengan efek denyut pada CSS3, terimakasih.
Belum ada Komentar untuk "Membuat Animasi Dengan Efek Berputar Pada CSS3 "
Posting Komentar