-

Cara Mudah Membuat Efek Animasi Dengan Animate CSS


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

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.

 


Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

Tutorial Menarik Lainnya

Membuat Lingkaran Dengan CSS

Membuat Lingkaran Dengan CSS Membuat Lingkaran Dengan CSS – Pada tutorial ini kita akan belajar membuat lingkaran atau nembuat bulat dengan menggunakan CSS. Memang mungkin ...
Membuat Template Web Responsive Dengan HTML dan CSS
Cara Membuat Text Di Tengah Dengan HTML dan CSS

Diskusi

Belum Ada Diskusi

Tulis Komentar / Pertanyaan

Download ebook belajar HTML & CSS dasar untuk pemula gratis

Download Ebook belajar HTML & CSS dasar untuk pemula gratis.

Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana. materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.

DOWNLOAD