Cara Membuat Animasi Pulse dengan Mudah

16/12/2014    Rully Febrian    1664     Website

Animasi pulse merupakan animasi berdenyut atau disebut juga denyut nadi. Efek ini biasanya digunakan agar pengunjung memberikan perhatian penuh pada suatu elemen bergerak yang berisikan info penting atau event yang sedang berlangsung pada website tersebut. Pada latihan ini saya akan memberikan teknik atau cara membuat efek animasi pulse dengan menggunakan CSS.

silakan buatlah kode HTML5 sederhana seperti berikut :

Cara-Membuat-Animasi-Pulse-dengan-Mudah

Kemudian tambahkan style keyframe dengan nama pulse seperti berikut :

Cara-Membuat-Animasi-Pulse-dengan-Mudah

Keyframe pulse diatas memiliki fungsi transform scale, dimana posisi animasi 50% scale atau ukuran elemen pulse akan membesar sebanyak 110%.

Kemudian tambahkan style untuk menjalankan animasi pulse :

Cara-Membuat-Animasi-Pulse-dengan-Mudah

Simpan dan klik demo untuk melihat hasilnya.

 

DEMO DOWNLOAD

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More