Tutorial : Membuat Animasi Dengan Animate CSS

Kali ini saya akan membuat tutorial yaitu “Membuat Animasi dengan Animate CSS”

Animasi ini berlaku untuk gambar, teks, dan elemen lain. Dengan kita menggunakan cara ini, kalian yang malas membuat animasi secara manual dapat dengan mudah dan praktis untuk membuat animasi, cukup dengan memanggil class yang ada.

Apa Itu Animate CSS?

Sebelum kita memulai tutorialnya, saya akan menjelaskan apa yang dimaksud dengan animate CSS itu. Animate CSS adalah sebuah library CSS yang di buat oleh seorang developer bernama Daniel Eden. Dia membuat dan mengembangkan dan di bagikan melalui Github.

Fungsi dari Animate CSS ini adalah untuk membuat animasi secara praktis dan kita tidak perlu repot-repot membuat animasi secara manual. Gambar, text dan elemen lainnya dapat kita animasikan juga.

Dengan menambahkan class yang ada, jadilah efek animasi yang ingin kita buat. Contoh efek animasinya juga sangat banyak dan sudah di sediakan. Ini adalah salah satu library CSS, masih banyak sekali library CSS yang membuat kita memudahkan pekerjaan kita dalam mendesain web. 

Membuat Animasi Menggunakan Animate CSS

Baik, sekarang kita kembali ke topik utama yaitu cara membuat animasi menggunakan library CSS yaitu Animate CSS. Berikut ini adalah langkah-langkah yang harus dilakukan untuk membuat animasi pada gambar, teks dan elemen lainnya jika ingin diberi animasi :

Download Library Animate CSS

Kita bisa mendownload library Animate CSS di sini atau bisa menggunakan CDN jika tidak ingin mendownload librarynya, tetapi menggunakan CDN laptop harus selalu keadaan online. Kalian bisa lihat CDN nya di sini.

Hubungkan File Animate.CSS dan Animate.min.CSS kedalam file HTML

Setelah kita mengunduh library animate.CSS, kita sekarang menghubungkan ke dalam file HTML. Seperti gambar di bawah ini :

Copy Class Animate.CSS Kedalam Elemen HTML yang Ingin Kita Animasikan

Selanjutnya, kita tinggal copy class animasi yang ingin kita gunakan, saya contohkan disini saya menggunakan animasi Animate_Flash. Jangan lupa, untuk memberikan class “animate_animated” selanjutnya berikan class efek animasi yang kita inginkan. Contohnya “Animated_Flash” yang membuat elemen akan berkedip-kedip.

Berikan juga class “infinite” untuk memberikan efek animasi terus-menerus, dan jika tidak ingin efek animasi tidak ingin terus-menerus/hanya sekali, jangan diberikan class “infinite”. Kalian bebas dalam berkreasi, ayo buatlah kreasi kalian sendiri yang bagus dan menarik!

Contoh Animasi Menggunakan Animate.CSS

Disini saya menggunakan efek animasi yang bernama “Animate_Swing” dan saya berikan juga class “infinite” untuk memberikan efek animasi terus-menerus. Class animasi ini memberikan efek seperti bingkai foto yang di goyang-goyangkan.

Efek yang ada di library Animate.CSS

Saya kasih contoh sedikit, berikut adalah daftar nama-nama class animasi yang bisa kalian pakai untuk membuat animasi di gambar, teks dan di elemen mana saja :

1. FadeIn
2. FadeInDown
3. FaddeInDownBig
4. Bounce
5. Flash
6. Wobble
7. Jello
8. BounceIn
9. BounceInDown
10. BounceInLeft
11. BounceInRight
12. BounceInUp
13. BounceOut
14. BounceOutDown
15. BounceOutRight
16. BounceOutUp
17. Flip=Flip
18. RotateIn
19. RotateInDownLeft
20. RotateInDownRight
21. RotateInUpLeft
22. RotateInUpRight
23. RotateOut
24. ZoomIn
25. ZoomOut

Nama-nama class diatas dapat kalian pakai dan di customize sendiri jika ingin terlihat beda dari default-nya.

Baca Juga : 10 CSS Framework, Wajib Diketahui dan Digunakan Tahun 2024!

Kesimpulan

Dalam kesempatan kali ini, saya dapat memberikan tutorial bagi kalian. Mudah-mudahan dapat berguna dan bermanfaat untuk kalian. Dan ingat, harus langsung di praktikan agar lebih mengerti dalam mengimplementasikan tutorial ini. 

Kalian bisa belajar tentang programming lebih dalam dan mengoptimalkan skill programming dengan ikut kelas online Gamelab di sini.

Referensi

https://www.demo2s.com/html-css/css-animate-to-move-image-up-and-down.html