Cara Membuat Animasi Pulse dengan Mudah

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 :

Kemudian tambahkan style keyframe dengan nama pulse seperti berikut :

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 :

Simpan dan klik demo untuk melihat hasilnya.

DEMO DOWNLOAD