Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Bantu Support Dunia Programming dengan menonaktifkan Adsblock, atau gunakan browser tanpa block iklan, dan jangan lupa klik iklan yang ada disitus ini ya, agar website terus berkembang

Membuat Animasi Dengan Efek Berputar Pada CSS3

By Muhammad Tajuddin Post a Comment
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 dengan 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....?

Membuat Animasi Dengan Efek Berputar Pada CSS3
Membuat Animasi Dengan Efek Berputar Pada CSS3 

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.

Cara Membuat Animasi dengan Efek Berputar menggunakan CSS3


Kita akan membuat animasi dengan efek berputar menggunakan CSS, 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 :  

<img src="Link gambar kalian" alt="Dunia Programming">
Setelah itu, kita beri class atau id pada bagian dalam tag img menjadi seperti ini : 

<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 : 

.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);}
}
Untuk source code lengkapnya bisa kalian copy pada bagian bawah ini, dan beri nama index.html : 

<!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>
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..? 

.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);}
}
Untuk source code lengkapnya akan nampak seperti dibawah ini : 

<!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>
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 mengenai seputar CSS3 di Dunia Programming

Sekian tutorial mengenai cara membuat animasi dengan efek denyut pada CSS3, terimakasih.

Post a Comment for "Membuat Animasi Dengan Efek Berputar Pada CSS3 "

- Gunakan Kata-Kata Yang Sopan
- Dilarang Keras Menaruh Link Aktif Dibawah Postingan
- Dilarang Membuat SPAM
- Dilarang Saling Melecehkan Antar Sesama
- Dilarang Promosi Web/Blog/Obat-Obatan Atau Yang Lain