Skip to content Skip to sidebar Skip to footer

Membuat Animasi Dengan Efek Denyut Pada CSS3

Dunia Programming - 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....? 

Mungkin dari kalian untuk para pemula masih bingung dengan efek yang satu ini, kebanyakan dari kalian masih menggunakan animasi bawaan dari gambar itu sendiri seperti gif, namun apakah kalian tau, tanpa kalian membuat animasi dari gif, kalian juga bisa membuatnya dengan css.

Memang banyak tujuan beberapa para programmer membuat animasi css ini, mungkin salah satunya agar website tampak terlihat hidup dan terkesan bagus, sehingga banyak yang mencari bagaimana sih cara membuatnya.

Animasi Dengan Efek Denyut Pada CSS3
Membuat CSS dengan efek denyut

Dan di 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. 

Cara Mudah Membuat Animasi efek denyut dengan CSS3


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 :

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

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

.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); }
}

Source Code Lengkapnya akan nampak seperti yang ada dibawah ini, simpan source code dibawah ini dengan nama index.html.


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

Dan Tampilannya akan nampak seperti pada gambar dibawah ini.

Animasi dengan CSS3 Efek Denyut

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

.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); }
}


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 : 

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

2 comments for "Membuat Animasi Dengan Efek Denyut Pada CSS3"

  1. jaang, code nya jangan dikasih anti copas dong hehe gak bisa di salin jadinya

    ReplyDelete

Berlangganan via Email