Hallo, teman-teman Dumet School.  Kembali lagi dengan saya di kursuswebdesign.com .  Kali ini saya akan membahas tentang cara Membuat Animasi Shake PadaTulisan Menggunakan CSS. Properti css yang saya gunakan adalah animation yang kemudian saya terapkan pada sebuah tulisan agar bisa bergerak  ke kiri dan ke kanan seperti shake.

Sebelumnya saya akan menjelaskan sedikit tentang @keyframes. @keyframes bisa kita definisikan sebagai tahapan-tahapan untuk kita merangkai sebuah timeline pada animasi css. Kemudian kita hubungkan dengan selector yang ingin kita berikan animasi menggunakan properti animation pada css. Kita butuh menambahakan properti animation dengan awalan khusus untuk memastikan dukungan terbaik browser. Berikut tambahan yang diberikan pada properti animation:

  • -webkit-  adalah tambahan awalan properti animation untuk pengguna chrome dan safari
  • -moz-  adalah tambahan awalan properti animation untuk pengguna firefox
  • -o- adalah tambahan awalan properti animation untuk pengguna opera
  • -ms- adalah tambahan awalan properti animation untuk pengguna internet explorer

Langsung saja teman-teman bisa buat struktur htmlnya terlebih dahulu, seperti pada script di bawah ini.

Setelah itu teman-teman buat style css animasinya untuk Membuat Animasi Shake PadaTulisan Menggunakan CSS , seperti pada script di bawah ini.

Jika sudah selesai,  maka tampilan huruf akan bergerak ke kiri dan ke kanan seperti shake. Nah teman-teman bisa perhatikan untuk value pada properti animationnya saya pakai shake yang sudah dibuat pada @keyframes dengan durasi animasi 5 detik tanpa batas.  Gimana,  mudah bukan ?  Sekian artikel tentang Membuat Animasi Shake PadaTulisan Menggunakan CSS.  Semoga bermanfaat dan selamat mencoba ya teman-teman.