Cara Mudah Membuat Efek Animasi Dengan Animate CSS

Cara Mudah Membuat Efek Animasi Dengan Animate CSS – Sesuai dengan judul tutorial kali ini. kita akan belajar bagaimana sih cara mudah untuk membuat animasi pada teks, gambar, dan elemen lain. yaitu cara mudah nya kita bisa menggunakan animate css.

Tutorial ini di tujukan untuk teman-teman yang mungkin agak sedikit malas untuk membuat efek animasi secara manual. maka salah satu alternatif yang bisa kita lakukan untuk membuat animasi yang memiliki efek yaitu dengan menggunakan sebuah library CSS yang bernama Animate.css.

BACA JUGA : Tutorial dasar CSS untuk pemula

Cara Mudah Membuat Efek Animasi Dengan Animate CSS

Di asumsikan untuk teman-teman yang membaca tutorial ini agar paham terlebih dahulu HTML dan CSS Dasar. karena tidak akan di jelaskan secara detail lagi tentang penggunaan class pada element HTML dan cara menghubungkan file CSS ke HTML. karena sudah kita bahas pada tutorial HTML dan CSS Dasar sebelumnya.

Next ..

Apa itu Animate.CSS ?

Nah, jika ada teman-teman di sini yang belum tau apa itu animate.css. animate css adalah sebuah library css yang sudah di buat dan kembangkan oleh seseorang developer bule yang bernama Daniel Eden. nih selengkapnya tentang pak daniel eden.

jadi beliau mengembangkan animate css dan membagikannya di github. adapun kegunaan dari animate css ini adalah untuk memudahkan kita untuk membuat animasi text, animasi gambar, dan element lainnya yang kita mau.Cara Mudah Membuat Efek Animasi Dengan Animate CSS.

hanya dengan menambahkan nama class nya saja. dan nama class-class nya pun sudah di sediakan untuk tergantung kepada kita sendiri mau menggunakan efek animasi yang bagaimana. karena ada banyak sekali contoh efek animasi yang di sediakan di sini.

Teman-teman bisa melihat demo nya di sini https://daneden.github.io/animate.css/.

Ini bukanlah sebuah library animasi css yang baru ya, hanya saja kita yang terlambat untuk menuliskan tutorialnya. hehe. maklum saja lah karena banyak kesibukan lain yang harus di selesaikan.

Saya rasa teman-teman sudah paham tentang asal usul dan kegunaan dari animate.css ini ya. kita lanjut ke cara pemasangan dan penggunaan nya.

Cara membuat animasi dengan menggunakan Animate.CSS

Berikut tahapan yang harus di lakukan untuk membuat animasi bergerak animate.css. Pertama sekali yang harus di lakukan adalah :

Download library animate.css

Teman-teman bisa download langsung di sini https://daneden.github.io/animate.css/.

Hubungkan file animate.css dengan file HTML

Tahap kedua kita tinggal menghubungkan file animate css dengan file html atau php kita. karena di sini hanya contoh, maka saya akan menggunakan file html saja.

di sini saya sudah mendownload animate.css dan membuat sebuah file html dengan nama animasi.html

Cara Mudah Membuat Efek Animasi Dengan Animate CSS

selanjutnya hubungkan file animate.css ke file html kita.

instalasi animate.css selesai. selanjutnya.

Mulai membuat animasi dengan animate.css

Tiba saat nya kita mencoba. kita akan coba dulu membuat animasi nya dengan efek bounce. atau seperti pantulan bola. kita tes pada element h1.

oke ayo kita lihat hasilnya :

nah. animasinya pun sudah muncul. seperti yang bisa teman-teman lihat pada penamaan class di element h1 di atas. pertama sekali berikan class “animated“.

selanjutnya berikan nama class sesuai dengan jenis efek animasi yang kita inginkan. seperti contoh di atas adalah efek “bounce“. dan “infinite” hanyalah opsi jika ingin membuat animasinya terus menerus berulang-ulang, maka berikan nama class infinite seperti contoh di atas. jika efeknya hanya ingin kita tampilkan sekali saja maka jangan gunakan class infinite.

Daftar efek animasi yang ada pada animate.css

Berikut ini adalah daftar nama class yang bisa teman-teman untuk membuat efek animasi yang berbeda-beda.

• bounce
• flash
• pulse
• rubberBand
• shake
• swing
• tada
• wobble
• jello
• bounceIn
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp
• bounceOut
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp
• fadeIn
• fadeInDown
• fadeInDownBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• fadeOut
• fadeOutDown
• fadeOutDownBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig
• fadeOutUp
• fadeOutUpBig
• flip = flip
• flipInX
• flipInY
• flipOutX
• flipOutY
• lightSpeedIn
• lightSpeedOut
• rotateIn
• rotateInDownLeft
• rotateInDownRight
• rotateInUpLeft
• rotateInUpRight
• rotateOut
• rotateOutDownLeft
• rotateOutDownRight
• rotateOutUpLeft
• rotateOutUpRight
• slideInUp
• slideInDown
• slideInLeft
• slideInRight
• slideOutUp
• slideOutDown
• slideOutLeft
• slideOutRight
• zoomIn
• zoomInDown
• zoomInLeft
• zoomInRight
• zoomInUp
• zoomOut
• zoomOutDown
• zoomOutLeft
• zoomOutRight
• zoomOutUp
• hinge
• rollIn
• rollOut

Nama-nama class di atas bisa teman-teman gunakan untuk membuat animasi efek yang berbeda-beda. dari mulai membuat efek pantulan seperti contoh pertama tadi sampai dengan efek zoom, bergetar, light, dan banyak lagi yg lainnya.

Contoh lain :

See the Pen Cara membuat animasi dengan animate.css by Malas Ngoding (@malasngoding) on CodePen.0

Cara Mudah Membuat Efek Animasi Dengan Animate CSS

oh iya, animasi ini bisa di gunakan pada gambar dan element html yg lainnya. jadi tidak hanya untuk text saja.

silahkan teman-teman eksperimen sendiri.

Sekian dulu tutorial cara membuat animasi dengan css ini. mudah-mudahan dapat bermanfaat, khususnya untuk saya sendiri dan orang banyak.