Cara membuat Icons Font Awesome bergerak

Kali ini saya ingin memberikan tutorial cara membuat font awesome dapat bergerak dan tentunya sobat sudah tau apa itu font awesome bukan?, animasi ini di kembangkan oleh Louis LIN ya, anda bisa fork project nya di
github.

Pertama sobat tambahkan css tambahan untuk menganimasikan font awesome nya dengan cara tambahkan kode ini di header anda

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.8/font-awesome-animation.min.css" rel="stylesheet"></link>

Lalu setelah itu cara menggunakanya cukup mudah yaitu dengan cara memanggil class icon awesome anda spasi class animasinya.

<i class="fa fa-ikon-anda animasinya"></i>

Class animasinya anda bisa lihat di sini. Intinya ke dua class tersebut anda gabung menjadi satu, tambahkan spasi untuk menambah class lebih dari satu, sebagai contoh:

 <i class="fa fa-thumbs-up fa-2x faa-bounce animated"></i>
 <i class="fa fa-thumbs-o-down faa-vertical animated">
 <i class="fa fa-hand-paper-o faa-shake animated"></i>
 <i class="fa fa-play-circle faa-pulse animated"></i>
 <i class="fa fa-heart faa-tada animated-hover"></i>
 <i class="fa fa-heart faa-tada animated-hover" style="color: #f66767;"></i>
Sukai ini  <a href="#" class="faa-parent animated-hover"><i class="fa fa-thumbs-up faa-pulse"></i> Sukai ini</a>

Sobat juga bisa mempercepat atau memperlambat gerakan animasi dengan menambah class faa-fast untuk lebih cepat dan faa-slow untuk lebih lambat.

Demikian cara membuat animasi font awesome di blog sobat

Selamat mencoba😄

Sumber : goez

Baca Juga

Josie

Cuma seorang blogger yang jarang ngeblog

Share :

Related Posts