Cara Membuat Efek Animasi dengan Animate.css

Posted on

Cara Membuat Efek Animasi dengan Animate.css

 

Halo sahabat programmer, jumpa lagi dengan lambecode. Pembahasan kali ini tentang cara membuat efek animasi dengan menggunakan Animate.css. Semakin maju teknologi, maka pengguna teknologi juga semakin maju juga. Kemajuan teknologi ini didorong oleh kemajuan di dunia IT. Saat ini, banyak website maupun aplikasi online yang sudah menggunakan animasi. Pada zaman dahulu kebanyakan para developper website hanya menggunakan css untuk mengkombinasikan warna pada hover text ataupun button. Berbeda dengan website – website yang berkembang sampai saat ini. Programmer banyak memodifikasi tampilan websitenya dengan menggunakan animasi. Karena dengan adanya animasi ini dianggap nyaman dilihat oleh pengguna.

Animate.css kebanyakan digunakan oleh orang yang ingin instant dalam membuat efek animasi. Karena pada dasarnya, Animate.css dapat dikatakan sebagai plugin css. Sebagian programmer dapat membuat css sendiri dengan beragam efek animasi. Namun ada juga programmer yang menggunakan Animate.css lalu melakukan kustomisasi terhadap css di dalamnya. Untuk lebih memahami Animate.css perhatikan lebih lanjut penjelasan berikut ini.

Animate.css

Animate.css merupakan plugin animasi yang menarik, menyenangkan, dan bersifat cross-browser sehingga dapat digunakan di semua browser. Sangat bagus untuk dipasang di home page website, slider, maupun landing page. Dibuat dan dikembangkan oleh desainer asal San Francisco yang bernama Daniel Eden.

Daniel Eden memperkenalkan Animate.css melalui GitHub dan bukan library css yang baru, namun sudah sangat lama. Pertama kali diperkenalkan di GitHub sekitar tanggal 16 Agustus 2013 oleh Daniel Eden dimulai dengan versi animate v.2.0. Hanya saja, banyak orang yang baru mengetahuinya setelah efek animasi banyak digunakan untuk pembuatan website.

Menggunakan animate.css sangat mudah, hanya dengan menambahkan nama class yang telah disediakan pada tag html. Baik itu pada text anchor, button, atau elemen lainnya tetap bisa menggunakan efek animasi ini. Hal ini sangatlah instan bagi pemula ataupun orang yang kurang paham dengan cara membuat animasi dengan css secara manual.

Anda dapat melihat semua efek animasi dari animate.css di sini. Stelah anda membaca artikel sampai di sini, anda tentu sudah memiliki gambaran, seperti apa Animate.css. Untuk lebih memahami cara instalasi dan cara menggunakan Animate.css di bawah ini.

Cara Install Animate.css

Ada beberapa cara yang dapat digunakan untuk melakukan instalasi Animate.css dan cukup memilih salah satu saja. Berikut ini cara instalasi Animate.css lengkap.

Download library

via CDN

https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css

via Bower

$ bower install animate.css –save

via npm

$ npm install animate.css –save

 

Cara Menggunakan Animate.css

  • Masukkan hasil download css ke dalam file project anda, umumnya pada tag <head> di index.html / index.php

  • Jika anda menggunakan CDN, anda dapat menggunakannya dengan cara seperti ini

  • Setelah itu, gunakan class animated ke dalam elemen html yang akan diberikan animasi. Gunakan class infinite untuk perulangan efek animasi yang tidak terbatas
  • Tambahkan class animasi di bawah ini setalah class animated
Nama Class   
bounceflashpulserubberBand
shakeheadShakeswingtada
wobblejellobounceInbounceInDown
bounceInLeftbounceInRightbounceInUpbounceOut
bounceOutDownbounceOutLeftbounceOutRightbounceOutUp
fadeInfadeInDownfadeInDownBigfadeInLeft
fadeInLeftBigfadeInRightfadeInRightBigfadeInUp
fadeInUpBigfadeOutfadeOutDownfadeOutDownBig
fadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBig
fadeOutUpfadeOutUpBigflipInXflipInY
flipOutXflipOutYlightSpeedInlightSpeedOut
rotateInrotateInDownLeftrotateInDownRightrotateInUpLeft
rotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRight
rotateOutUpLeftrotateOutUpRighthingejackInTheBox
rollInrollOutzoomInzoomInDown
zoomInLeftzoomInRightzoomInUpzoomOut
zoomOutDownzoomOutLeftzoomOutRightzoomOutUp
slideInDownslideInLeftslideInRightslideInUp
slideOutDownslideOutLeftslideOutRightslideOutUp
heartBeat
  • Contoh pemanggilan css pada elemen html seperti ini

Maksud dari class di atas adalah tulisan “Lambecode” akan diberikan animasi bounce(melompat – lompat) diulang berkali – kali dengan delay waktu 2 detik. Jika kurang paham dengan turorial di atas, tonton dan pelajari dari video turorial ini.

 

Mendefinisikan Delay dan Kecepatan Animasi

delay

Untuk melakukan delay terhadap efek animasi yang diberikan Animate.css dapat dilakukan dengan menambahkan class di bawah ini

Nama ClassDelay
delay-2s2 Detik
delay-3s3 Detik
delay-4s4 Detik
delay-5s5 Detik

Catatan : Default delay dari 1 detik hingga 5 detik. Jika anda memberikan efek delay lebih lama, anda dapat melakukan modifikasi terhadap css yang ada.

slow, slower, fast, faster

Sedangkan untuk memberikan efek animasi kecepatan pada elemen html, dapat menggunakan class seperti contoh di bawah ini

Nama ClassKecepatan
slow2 detik
slower3 detik
fast800 mili detik
faster500 mili detik

Catatan : Animate.css secara default hanya menyediakan kecepatan efek animasi seperti pada tabel di atas. Namun anda dapat melakukan modifikasi terhadap css tersebut.

 

Sekian tutorial dari lambecode. Jika anda merasa kurang jelas, anda dapat melihat GitHub secara langsung.

2 thoughts on “Cara Membuat Efek Animasi dengan Animate.css

Leave a Reply

Your email address will not be published. Required fields are marked *