10 Alat Animasi CSS3 Anda Perlu Bookmark
Oleh kerana orang cenderung untuk lebih mudah melihat perkara-perkara yang bergerak, animasi dengan bijak yang digunakan dapat meningkatkan pengalaman pengguna laman web oleh menarik perhatian kepada elemen penting yang perlu pengguna perhatikan dengan cepat.
CSS3 telah memperkenalkan sintaks animasi baru yang dapat membantu anda mencapai banyak perkara menarik dalam reka bentuk anda. Membina animasi sejuk kadang-kadang boleh menjadi rumit dan memakan masa walaupun, itulah apabila perpustakaan dan penjana animaiton boleh digunakan dengan baik.
Semak beberapa animasi yang mungkin dilakukan dengan CSS:
- 38 Inspirasi Animasi CSS3
- 15 Kesan Teks Cantik Dicipta dengan CSS
- 30 Animasi CSS Percuma Anda Perlu Lihat
- Bagaimana Membuat Kesan Bouncing dengan Animasi CSS3
Dalam catatan ini, kita akan melihat 10 alat hebat yang boleh menjadikannya lebih mudah dan lebih cepat untuk membuat animasi anda sendiri.
1. CSS3Gen CSS3 Animation Generator
CSS3Gen menyediakan anda dengan penjana animasi yang mudah digunakan yang membolehkan anda dengan cepat menjana animasi asas. Walaupun anda tidak akan membuat karya seni rumit dengan alat ini, itu adalah pilihan yang baik jika anda ingin membuat animasi standard tanpa terlalu banyak kekecohan.
Anda tidak perlu membuat tangan anda kotor dengan kod, kerana anda boleh menetapkan sifat-sifat dalam bentuk, pratonton hasilnya, kemudian cukup salin dan tampal kod itu ke dalam fail CSS anda sendiri.
2. CSS Animate
Jika awak memerlukan animasi yang lebih rumit, anda mungkin dapati CSS Animate berguna. Ia mempunyai UI yang lebih matang, anda boleh menetapkan sedikit lebih banyak sifat, dan anda boleh mengikuti, menghentikan, dan memulakan animasi dengan bantuan garis masa intuitif.
Terdapat juga Contoh animasi, seperti “Bounce”, “Shake”, dan “Hayun”, bahawa anda boleh memuatkan ke penjana, dan mengubah kod mengikut keperluan anda.
3. Coveloping CSS Animation Generator
CovelopingPenjana animasi mungkin mungkin pilihan terbaik jika anda baru dengan animasi CSS3, dan mahu cepat memahami bagaimana mereka berfungsi. Alat mudah tetapi berkuasa ini membolehkan anda untuk menguji pelbagai jenis animasi CSS3 yang ditawarkan, dan dengan mudah memeriksa apakah perbezaan di antara mereka.
Anda hanya perlu menetapkan 4 parameter: jenis animasi, fungsi animasi, tempoh dalam secs, dan jika animasi tidak terhingga. Apabila anda sudah siap, anda hanya perlu mendapatkan dan merebut kod HTML dan CSS yang dihasilkan.
4. Animasi Magic
Animasi Magic adalah perpustakaan CSS yang sejuk yang membolehkannya mudah membuat animasi dengan kesan khas di laman anda. Sebagai contoh, anda boleh membuat elemen lenyap masuk dan keluar, terbuka ke kiri atau kanan, kemudian kembali, berputar ke bawah, ke atas, kiri, atau ke kanan, dan banyak lagi yang lain
Apa yang anda perlu lakukan ialah memuat turun kod itu, masukkan fail CSS ke halaman HTML anda, dan tambahkan kelas yang sesuai dengan bantuan jQuery dengan cara berikut:
$ ('. yourdiv'). hover (function () $ (this) .addClass ('magictime puffIn');); Anda juga boleh menukar tetapan pemasa, dan membuat animasi tak terbatas dengan bantuan jQuery (untuk mendapatkan butiran lanjut lihat fail readme).
5. Animate.css
Animate.css menyediakan anda dengan satu set animasi, pelayar silang CSS3 animasi. Animasi dibahagikan kepada kumpulan seperti Pencari Perhatian, Pintu Melantun, Keluar Melantun, Pintu Memudar, dan banyak lagi, jadi anda tidak boleh mengeluh mengenai kekurangan pilihan.
Anda boleh memuat turun kod dari Github, maka anda hanya perlu menambah fail CSS ke halaman HTML anda, dan kelas CSS yang berkaitan dengan elemen HTML yang ingin dinyanyikan.
6. Bounce.js
Bounce.js adalah perpustakaan JavaScript berguna yang membolehkan anda mewujudkan animasi rumit. Bounce.js mempunyai antara muka pengguna yang matang yang membolehkan anda menambah komponen yang berbeza - seperti pelonggaran, tempoh, kelewatan, dan bilangan bounces - secara manual ke animasi anda, atau pilih pratetap siap sedia, kemudian mainkan animasi, dan menapis sifat-sifatnya jika perlu.
7. AniJS
AniJS adalah perpustakaan JavaScript supercool yang membolehkan anda menambah animasi CSS3 untuk reka bentuk anda, dan untuk membina komponen UI yang canggih seperti tab animasi, akordion, modal, menu gelongsor, pemberitahuan apl mudah alih, tatal mendedahkan dan banyak lagi.
Ia berfungsi dengan semua penyemak imbas moden termasuk iOS dan Android, tidak memerlukan mana-mana perpustakaan pihak ketiga, dan mempunyai pameran hebat yang disebut AniCollection di mana anda boleh mencuba dengan mudah dengan kesan yang berbeza yang disediakan oleh perpustakaan.
8. Spinners CSS Satu Elemen
Pernahkah anda ingin meningkatkan reka bentuk anda dengan spinners pemuatan animasi? Jika jawapannya adalah ya, perpustakaan pemutar CSS comel ini mungkin merupakan pilihan yang sangat baik untuk anda. Kod CSS untuk spinners ditulis dalam KURANG. Tidak ada tetapan, kod itu sudah sedia dibuat, anda hanya perlu memasukkannya ke dalam fail HTML dan CSS anda sendiri.
9. Odometer
Odometer adalah alat yang bijak untuk letakkan meter animasi sejuk ke laman web anda. Ia adalah pustaka CSS dan JavaScript, bahagian CSS ditulis dalam Sass, dan anda boleh memilih dari pelbagai tema seperti “Digital”, “Stesen Keretapi”, dan “Kereta”.
Untuk menggunakan Odometer, anda perlu menambah fail JavaScript dan fail tema yang dipilih ke halaman HTML anda, kemudian kelas = "odometer" pemilih ke elemen yang anda mahu buat menjadi meter animasi. Pilihan yang ideal untuk mewakili data secara visual, atau membuat “Akan datang” halaman lebih menarik.
10. Snabbt.js
Snabbt.js adalah perpustakaan animasi minimalis yang membantu anda dengan mudah menggerakkan perkara di sekeliling. Sekiranya anda memerlukan sedikit inspirasi, lihatlah demo untuk melihat apa yang boleh anda capai dengan alat animasi pintar ini, jadual berkala animasi pada screenshot di bawah adalah salah satu daripada banyak kemungkinan Snabbt.js mudah dilaksanakan.
Anda perlu menulis sedikit JavaScript jika anda ingin menggunakan pustaka ini, tetapi hasilnya agak luar biasa, jadi ia mungkin bernilai masalah.
