Membuat Animasi Dengan Efek Denyut Pada CSS3
Assalamu'alaikum Wr.Wb,
Halo Programmer Indonesia, bertemu lagi dengan saya, kali ini saya akan membahas bagaimana sih cara membuat animasi dengan efek denyut hanya dengan mengunakan CSS3, apakah bisa....?
Jawabannya, sangat bisa sekali, sebab, dalam fitur CSS versi 3 saat ini sudah menyediakan banyak efek Animasi seperti Denyut, Berputar, Sliding Dan masih banyak lagi.
 |
| CSS3 |
Jawabannya, sangat bisa sekali, sebab, dalam fitur CSS versi 3 saat ini sudah menyediakan banyak efek Animasi seperti Denyut, Berputar, Sliding Dan masih banyak lagi.
"Ngapain harus dengan CSS3..? dengan Photoshop atau Photoscape saya bisa membuat Animasi kok."
memang bisa, akan tetapi bisa kalian terlalu banyak menggunakan animasi dari luar, atau bukan efek dari source code itu sendiri, secara otomatis, load website atau blog kalian akan menjadi berat.
Maka dari itu, CSS mengeluarkan versi terbarunya yaitu versi 3 dengan banyak source code yang support dengan dengan animasi dengan berbagai model, salah satunya yaitu efek denyut yang nantinya kita akan bahas.
Oke langsung saja kita masuk ke dalam penulisan source code efek Denyut dengan menggunakan CSS3.
Langkahnya, bila kalian ingin membuat efek denyut pada suatu gambar, misalkan Gambar Logo Dunia Programming, maka penulisan awal scriptnya akan seperti dibawah ini :
Setelah itu, kita masuk kedalam proses pengelompokan class atau id, sebagai contoh kita pilih class, maka penulisan source codenya akan nampak seperti dibawah ini.
Setelah itu, kita akan masuk kedalam proses CSS3 nya, yaitu membuat animasi, taruh source code CSS3 ini kedalam link external dengan nama style.css atau juga bisa diletakkan dibagian dalam header atau diantara <head> dibawah <title></title>.
Langkahnya, bila kalian ingin membuat efek denyut pada suatu gambar, misalkan Gambar Logo Dunia Programming, maka penulisan awal scriptnya akan seperti dibawah ini :
Script HTML
<img src="Lokasi Tempat Gambar Kalian.jpg" title="Dunia Programming">
Setelah itu, kita masuk kedalam proses pengelompokan class atau id, sebagai contoh kita pilih class, maka penulisan source codenya akan nampak seperti dibawah ini.
Script HTML
<img src="Lokasi Tempat Gambar Kalian.jpg" title="Dunia Programming" class="denyut">
Setelah itu, kita akan masuk kedalam proses CSS3 nya, yaitu membuat animasi, taruh source code CSS3 ini kedalam link external dengan nama style.css atau juga bisa diletakkan dibagian dalam header atau diantara <head> dibawah <title></title>.
Script CSS3
.denyut {
-webkit-animation:;
animation:pound .9s infinite;
animation-duration: 8s;
}
@keyframes pound {
0% { transform: scale(1.2); }
50% { transform: scale(1); }
100% { transform: scale(1.2); }
}
-webkit-animation:;
animation:pound .9s infinite;
animation-duration: 8s;
}
@keyframes pound {
0% { transform: scale(1.2); }
50% { transform: scale(1); }
100% { transform: scale(1.2); }
}
Source Code Lengkapnya akan nampak seperti yang ada dibawah ini, simpan source code dibawah ini dengan nama index.html.
Dan Tampilannya akan nampak seperti pada gambar dibawah ini.
Script CSS3
<!doctype html>
<html>
<head>
<title>Dunia Programming</title>
<style type="text/css">
.denyut {
-webkit-animation:;
animation:pound .9s infinite;
animation-duration: 8s;
}
@keyframes pound {
0% { transform: scale(1.2); }
50% { transform: scale(1); }
100% { transform: scale(1.2); }
}
</style>
</head>
<body>
<img src="Lokasi Tempat Gambar Kalian" alt="Dunia Programming" class="denyut"/>
</body>
</html>
<html>
<head>
<title>Dunia Programming</title>
<style type="text/css">
.denyut {
-webkit-animation:;
animation:pound .9s infinite;
animation-duration: 8s;
}
@keyframes pound {
0% { transform: scale(1.2); }
50% { transform: scale(1); }
100% { transform: scale(1.2); }
}
</style>
</head>
<body>
<img src="Lokasi Tempat Gambar Kalian" alt="Dunia Programming" class="denyut"/>
</body>
</html>
Dan Tampilannya akan nampak seperti pada gambar dibawah ini.
Dan kalian juga bisa melakukan cara diatas pada blog kalian yang akan dibuat efek denyut-denyut dengan cara :
1). Masuk ke bagianmenu Template > Edit HTML
2). Letakan script dibawah ini kedalam kategori CSS lainnya, atau bisa juga diaatas </b:skin>
3). Agar lebih cepat, kita tekan CTRL + F, dan masukkan kode </b:skin>, lalu tekan Enter
4). Setelah itu, klik Simpan
5). Lalu kita cari bagian gambar yang ingin dibuat efek denyut, lalu kita tambahkan class="denyut" kedalam tag gambar tersebut misal contoh :
6). Lalu klik Simpan, dan lihat hasilnya.
Bagaimana...? Keren bukan..? pastinya dongs keren, mau tau animasi CSS3 lainnya...? yuk ikuti terus tutorial Dunia Proramming, cara gampang kok, tingal klik Like pada Fanspage disebelah kanan Website, atau juga bisa Subscribe Email kalian biar tidak ketinggalan Artikel Terbaru dari Dunia Programming.
1). Masuk ke bagianmenu Template > Edit HTML
2). Letakan script dibawah ini kedalam kategori CSS lainnya, atau bisa juga diaatas </b:skin>
3). Agar lebih cepat, kita tekan CTRL + F, dan masukkan kode </b:skin>, lalu tekan Enter
Script CSS3
.denyut {
-webkit-animation:;
animation:pound .9s infinite;
animation-duration: 8s;
}
@keyframes pound {
0% { transform: scale(1.2); }
50% { transform: scale(1); }
100% { transform: scale(1.2); }
}
-webkit-animation:;
animation:pound .9s infinite;
animation-duration: 8s;
}
@keyframes pound {
0% { transform: scale(1.2); }
50% { transform: scale(1); }
100% { transform: scale(1.2); }
}
4). Setelah itu, klik Simpan
5). Lalu kita cari bagian gambar yang ingin dibuat efek denyut, lalu kita tambahkan class="denyut" kedalam tag gambar tersebut misal contoh :
Script HTML
<img src="Logo.jpg" alt="Logo" class="denyut"/>
6). Lalu klik Simpan, dan lihat hasilnya.
Bagaimana...? Keren bukan..? pastinya dongs keren, mau tau animasi CSS3 lainnya...? yuk ikuti terus tutorial Dunia Proramming, cara gampang kok, tingal klik Like pada Fanspage disebelah kanan Website, atau juga bisa Subscribe Email kalian biar tidak ketinggalan Artikel Terbaru dari Dunia Programming.
Oke, cukup sampai disini tutorial mengenai Animasi dengan CSS3, semoga apa yang saya jelaskan diatas tadi bermanfaat bagi kalian semua, terima kasih.
Belum ada Komentar untuk "Membuat Animasi Dengan Efek Denyut Pada CSS3"
Posting Komentar