10 Alat Animasi CSS3 Yang Harus Anda Bookmark

Karena orang cenderung lebih mudah memahami hal-hal yang bergerak, animasi yang digunakan dengan cerdas dapat meningkatkan pengalaman pengguna situs menarik perhatian pada elemen-elemen penting yang perlu diperhatikan pengguna dengan cepat.

CSS3 telah memperkenalkan sintaks animasi baru yang dapat membantu Anda mencapai banyak hal menarik dalam desain Anda. Membuat animasi keren terkadang rumit dan memakan waktu, saat itulah perpustakaan dan generator animaiton dapat digunakan dengan sangat baik.

Lihatlah beberapa animasi yang dimungkinkan dengan CSS:

38 Demo Animasi CSS3 yang Menginspirasi
15 Efek Teks Cantik Dibuat dengan CSS
30 Animasi CSS Keren Yang Harus Kamu Lihat
Cara Membuat Efek Pentalan dengan Animasi CSS3

Dalam posting ini kita akan melihat 10 alat brilian yang dapat membuatnya lebih mudah dan lebih cepat untuk membuat animasi Anda sendiri.

1. Generator Animasi CSS3Gen CSS3

CSS3Gen memberi Anda generator animasi yang mudah digunakan yang memungkinkan Anda menghasilkan animasi dasar dengan cepat. Meskipun Anda tidak akan membuat karya seni yang rumit dengan alat ini, itu adalah pilihan yang bagus jika Anda ingin membuat animasi standar tanpa terlalu banyak repot.

Kamu tidak harus membuat tangan Anda kotor dengan kode, karena Anda dapat mengatur properti pada formulir, pratinjau hasilnya, lalu cukup salin dan tempel kode ke file CSS Anda sendiri.

2. CSS Animate

Jika kamu butuh animasi yang lebih rumit, kamu mungkin menemukan CSS Animate berguna. Ini memiliki UI yang lebih matang, Anda dapat mengatur properti sedikit lebih, dan Anda dapat mengikuti, menghentikan, dan memulai kembali animasi dengan bantuan garis waktu yang intuitif.

Ada juga animasi Contoh, seperti “Melambung”, “Menggoyang”, dan “Ayunan”, Anda dapat memuat ke generator, dan memodifikasi kode sesuai dengan kebutuhan Anda.

3. Mengembangkan Generator Animasi CSS

PengembanganGenerator animasi mungkin merupakan pilihan terbaik jika Anda baru dengan animasi CSS3, dan ingin cepat memahami cara kerjanya. Alat sederhana namun kuat ini memungkinkan Anda untuk menguji berbagai jenis animasi yang ditawarkan CSS3, dan dengan mudah memeriksa apa perbedaan di antara mereka..

Anda hanya perlu menetapkan 4 parameter: jenis animasi, fungsi animasi, durasi dalam detik, dan jika animasi tidak terbatas. Saat Anda siap, Anda hanya perlu mendapatkan dan mengambil kode HTML dan CSS yang dihasilkan.

4. Animasi Ajaib

Animasi Ajaib adalah pustaka CSS keren yang memungkinkan mudah menempatkan animasi dengan efek khusus di situs Anda. Misalnya Anda dapat membuat elemen lenyap masuk dan keluar, terbuka ke kiri atau kanan, lalu kembali, memutar ke bawah, ke atas, ke kiri, atau ke kanan, dan banyak lainnya.

Yang harus Anda lakukan adalah mengunduh kode, memasukkan file CSS ke halaman HTML Anda, dan menambahkan kelas yang sesuai dengan bantuan jQuery dengan cara berikut:

 $ ('. yourdiv'). hover (function () $ (this) .addClass ('magictime puffIn'););

Anda juga dapat mengubah pengaturan timer, dan membuat animasi tanpa batas dengan bantuan jQuery (untuk lebih jelasnya lihat file readme).

5. Animate.css

Animate.css memberi Anda satu set keren, animasi lintas-browser CSS3. Animasi dibagi menjadi beberapa kelompok seperti Attention Seekers, Bouncing Entrances, Bouncing Exits, Fading Entrances, dan banyak lainnya, sehingga Anda benar-benar tidak dapat mengeluh tentang kurangnya pilihan..

Anda dapat mengunduh kode dari Github, maka Anda hanya perlu menambahkan file CSS ke halaman HTML Anda, dan kelas-kelas CSS yang relevan ke elemen HTML yang ingin Anda animasikan.

6. Bounce.js

Bounce.js adalah pustaka JavaScript praktis yang memungkinkan Anda buat animasi yang rumit. Bounce.js memiliki antarmuka pengguna yang matang yang memungkinkan Anda untuk menambahkan komponen yang berbeda - seperti pelonggaran, durasi, penundaan, dan jumlah bouncing - secara manual ke animasi Anda, atau pilih preset yang siap digunakan, kemudian mainkan animasinya, dan sempurnakan properti jika perlu.

7. AniJS

AniJS adalah perpustakaan JavaScript supercool yang memungkinkan Anda untuk menambahkan animasi CSS3 ke desain Anda, dan untuk membangun komponen UI yang canggih seperti tab animasi, akordeon, modem, menu geser, notifikasi aplikasi seluler, gulir mengungkapkan, dan banyak lagi.

Ini bekerja dengan semua browser modern termasuk iOS dan Android, tidak memerlukan perpustakaan pihak ketiga, dan memiliki karya spektakuler yang disebut AniCollection di mana Anda dapat dengan mudah bereksperimen dengan berbagai efek yang disediakan oleh perpustakaan..

8. Pemintal CSS Elemen Tunggal

Pernahkah Anda ingin meningkatkan desain Anda dengan pemintal pemuatan animasi? Jika jawabannya ya, pustaka pemintal CSS imut ini mungkin menjadi pilihan yang tepat untuk Anda. Kode CSS untuk pemintal ditulis dalam KURANG. Tidak ada pengaturan, kode sudah siap dibuat, Anda hanya perlu memasukkannya ke file HTML dan CSS Anda sendiri.

9. Odometer

Odometer adalah alat yang brilian untuk Tempatkan meter animasi keren ke situs Anda. Itu adalah CSS dan perpustakaan JavaScript, bagian CSS ditulis dalam Sass, dan Anda dapat memilih dari berbagai tema seperti “Digital”, “Stasiun kereta”, dan “Mobil”.

Untuk menggunakan Odometer, Anda harus menambahkan file JavaScript dan file tema yang dipilih ke halaman HTML Anda, lalu class = "odometer" pilih elemen yang ingin Anda jadikan meter animasi. Pilihan ideal untuk merepresentasikan data secara visual, atau untuk membuat “Segera akan datang” Halaman yang lebih menarik.

10. Snabbt.js

Snabbt.js adalah perpustakaan animasi minimalis itu membantu Anda dengan mudah memindahkan barang-barang. Jika Anda membutuhkan sedikit inspirasi, lihat demo untuk melihat apa yang dapat Anda capai dengan alat animasi pintar ini, tabel periodik animasi pada tangkapan layar di bawah ini hanyalah salah satu dari banyak kemungkinan yang Snabbt.js buat mudah diterapkan.

Anda perlu menulis sedikit JavaScript jika Anda ingin menggunakan perpustakaan ini, tetapi karena hasilnya cukup spektakuler, jadi mungkin sepadan dengan masalahnya.