Perpustakaan animasi CSS

Terdapat banyak perpustakaan animasi di web yang dapat membantu anda membuat kesan animasi di laman web. Daripada memberi tumpuan kepada sintaks atau teknik animasi, perpustakaan ini menyediakan animasi pratetap yang boleh digunakan secara langsung. Sebagai contoh, tambahkan nama kelas, seperti "Animate-flip-up", untuk membuat elemen flip ke atas. Jika anda ingin memulakan dengan cepat, jenis perpustakaan ini sangat praktikal.

Saya secara peribadi mengesyorkan anda: 1) Belajar tatabahasa animasi CSS dan menguasai prinsip -prinsip animasi; 2) Sesuaikan animasi mengikut gaya laman web. Walau bagaimanapun, meneroka perpustakaan ini boleh memberi inspirasi, memberikan contoh kod, dan meletakkan asas untuk projek anda.

Mari kita lihat gambaran keseluruhan perpustakaan ini. Sesetengah perpustakaan mengambil pendekatan yang berbeza: hanya menyediakan kelas yang diperlukan, mixin sass, perpustakaan JavaScript ringan untuk menambah/mengeluarkan kelas, dan banyak lagi. Tetapi mereka pada dasarnya adalah "perpustakaan animasi CSS". (Sesetengah perpustakaan mempunyai "CSS3" dalam nama mereka, yang kelihatan agak ketinggalan zaman, dan sekarang orang jarang memanggil mereka itu.)

Walaupun animasi dapat meningkatkan keseronokan dan interaktiviti, ingatlah bahawa tidak semua pengguna suka melihat animasi semasa melayari web. Sila rujuk kepada "Revisiting Prefters-Reduced-Motion" Eric Bailey, "Artikel Permintaan Motion Motion" untuk belajar bagaimana untuk menyesuaikan diri dengan pengguna dengan pilihan yang lebih sedikit atau tiada animasi.

Animista

Pilih animasi yang anda suka, dan ia akan memberikan nama kelas yang memanggil animasi keyframe (anda perlu menyalin dan tampal kedua -duanya). Intinya ialah anda hanya perlu menggunakan bahagian yang diperlukan.

Animate.css

Salah satu perpustakaan animasi CSS klasik yang dicipta oleh Dan Eden.

Tachyons-Animate

Tachyons sendiri adalah perpustakaan CSS atom yang mengandungi sejumlah besar kelas utiliti untuk mereka bentuk apa -apa dengan menambah kelas. Tachyons-Animate memanjangkan ciri-ciri ini dengan menambahkan "kelas satu tujuan untuk membantu anda mengatur animasi CSS". Ia boleh digunakan semata -mata, tetapi dokumentasi mencadangkan ia boleh digunakan bersamaan dengan perpustakaan animasi lain kerana kelas penolong adalah universal.

Tak terhingga

Animasi ini, seperti putaran dan denyutan, direka khusus untuk berjalan tak terhingga.

Ui gerakan

Perpustakaan SASS untuk mewujudkan peralihan dan animasi CSS yang fleksibel.

micron

Perpustakaan interaksi mini yang dibina menggunakan animasi CSS dan dikawal oleh JavaScript.

Vivify

Vivify agak seperti Animate.css kerana ia mengandungi banyak animasi jenis yang sama. Ia juga menyediakan banyak animasi sendiri.

Hover.css

Satu set kesan hover yang didorong oleh CSS3 boleh digunakan untuk pautan, butang, logo, SVG, gambar yang dipaparkan, dan banyak lagi. Mudah memohon kepada elemen anda sendiri, mengubah suai atau hanya untuk inspirasi. CSS, SASS dan kurang versi boleh didapati.

AllanimationCSS3

Animasi Magic CSS3

Hari Selasa.

Perpustakaan animasi CSS yang unik.

VHS

Reboundgen

Csshake

Gerakan CSS

cssanimation.io

Wickedcss

Woah.css

Menjengkelkan

Hexa

Mimic.css

Atas ialah kandungan terperinci Perpustakaan animasi CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!