Cananimate : Library Animasi CSS yang Ringan dan Mudah Digunakan

Halo semua,apa kabar ? semoga kita selalu dalam keadaan sehat, bahagia, banyak rezeki, dan selalu menjadi pribadi yang lebih baik lagi. Pada kesempatan kali ini izinkan saya untuk memperkenalkan library CSS buatan saya yang mungkin bisa mempermudah pekerjaan kalian sebagai seorang frontend developer untuk mempercantik tampilan website kalian dengan animasi CSS.

Library ini saya beri nama cananimate yang mana dalam penamaan ini saya berharap kedepannya cananimate ini bisa menjadi salah satu library animasi css terbaik di dunia. Hari ini saya berkenan untuk merilis versi pertama (Versi 1.0) cananimate secara terbuka kepada semua orang.

Pada versi pertama ini, tersedia 10 kelas animasi yaitu :

1. toRight : membuat animasi berjalan ke kanan.
2. toLeft : membuat efek animasi bergerak ke kiri.
3. toBottom : membuat efek animasi bergerak ke bawah.
4. toTop : membuat efek animasi bergerak ke atas.
5. bounce : membuat efek animasi memantul.
6. fadeIn : membuat efek animasi timbul.
7. fadeOut :membuat efek animasi menghilang.
8. zoomIn : membuat efek animasi diperbesar.
9. zoomOut : membuat efek animasi diperkecil.
10. spin : membuat efek animasi berputar seperti roda/soinner.

Masing-masing kelas dapat kalian demonstrasikan melalui web browser kalian dengan membuka file index.html yang telah tersedia pada library cananimate. Library cananimate didesain sangat ringan dan mudah digunakan sehingga siapa saja bisa menginstal dan menggunakannya dengan sangat mudah. Selain itu, cananimate juga bersifat open-source dimana setiap orang bisa melihat, menggunakan, bahkan ikut berpartisipasi dalam pengembangan library animasi cananimate.

Instalasi Cananimate
Proses instalasi cananimate sangatlah mudah, yaitu meliputi langkah-langkah sebagai berikut :

1. Download file zip cananimate di Cananimate V. 1. 0
2. Ekstrak file cananimate.zip yang telah kalian download.
3. Untuk melihat demonstrasi masing-masing kelan animasi, silakan buka file index.html yang terdapat di dalam folder cananimate.
4. Pindahkan/kopi file cananimate.css yang ada di dalam folder cananimate ke folder projek kalian.
5. Proses instalasi dilakukan dengan cara menambahkan kode <link rel="stylesheet" href="cananimate.css"> pada tag <head>...</head> dalam file projek kalian.
6.  Instalasi selesai.

Sekian dan terimakasih untuk artikel kali ini, semoga bermanfaat.

baca juga  Tutorial Membuat Library CSS Responsive Sendiri