Animate.css telah wujud beberapa tahun sekarang dan saya harus mengakui menjadi terlambat kepada parti. Saya hanya mendapati beberapa bulan yang lalu ketika mencari jaring untuk beberapa tutorial animasi CSS dan mendapati apa yang harus menjadi cara terpantas, paling mudah untuk menghidupkan sekitar, Animate.css.
Dicipta oleh seorang lelaki yang dipanggil Dan Eden, Animate.css adalah cara cepat untuk melihat bagaimana CCS berfungsi dan mendapatkan beberapa tindakan animasi di laman web anda.
Diterangkan sebagai 'animasi CSS air Hanya-tambah' Animate.css adalah sedikit keseronokan dengan sisi yang serius. Ia membolehkan bahkan pereka web amatur seperti diri saya untuk cepat mendapatkan pegangan dengan asas-asas animasi CSS dan membuat kesan mudah tetapi berkesan untuk laman web. Daripada tajuk animasi tunggal untuk pergerakan yang lebih terlibat, alat ini boleh melakukannya.
Animate.css
Animate.css tersedia untuk dimuat turun dari GitHub dan pada asasnya merupakan perpustakaan kesan CSS mudah yang dikumpulkan dalam satu tempat. Setiap animasi dibungkus dengan baik dan sedia untuk digunakan. Apa yang perlu anda lakukan ialah mencari animasi yang anda suka dan memohon kelas. Itu benar-benar ada di sana.
Anda tidak perlu memuat turun seluruh perpustakaan jika anda tidak mahu kerana terdapat 2, 500 baris kod di dalamnya. Anda boleh melawat laman Animate.css, cari animasi dan klik pautan Muat turun Animate.css. Ia memuat kelas ke laman web untuk menyalin dan menggunakan seperti yang anda lihat patut.
Ia lebih mudah menggunakan GitHub walaupun dan menggerudi untuk mencari kesan yang anda cari.
- Navigasi ke halaman GitHub css.
- Klik pautan Sumber untuk mengakses senarai elemen.
- Pilih jenis kesan yang anda cari dari senarai. Lantunan adalah pencari perhatian, jadi pilih pautan perhatian_seekers.
- Pilih bounce.css.
- Salin kod dan letakkan ke halaman anda untuk menggunakan animasi.
Ia sememangnya mudah. Anda pastinya akan memilih pilihan yang berbeza untuk kesan yang berbeza tetapi hasil akhir adalah sama. Akses kepada kod yang diperlukan untuk melakukan pengangkatan berat pada halaman.
Membina objek animasi dengan Animate.css
Membina sesuatu yang sejuk dengan Animate.css adalah mudah. Ia hanya masalah mencari kod CCS dan menambahnya ke CSS anda sendiri. Jika saya boleh melakukannya, sesiapa boleh!
Pilihan pertama pada halaman Animate.css adalah lantunan, jadi mari kita menggunakannya dalam contoh ini.
- Paste ' ' dalam dalam lembaran gaya anda.
- Cari CSS untuk animasi yang anda mahu dan tambahkan ke elemen yang anda mahu bernyawa. Sebagai contoh, tambahkan ' 'untuk menambah kesan melantun untuk menguji, imej atau apa sahaja.
- Tambah kod CSS berikut untuk menjadikannya berfungsi. Diambil dari bounce.css di atas.
@keyframes bounce {
dari, 20%, 53%, 80%, kepada {
animasi-fungsi masa: kubik-bezier (0.215, 0.610, 0.355, 1.000);
mengubah: translate3d (0, 0, 0);
}
40%, 43% {
animasi-fungsi masa: kubik-bezier (0.755, 0.050, 0.855, 0.060);
mengubah: translate3d (0, -30px, 0);
}
70% {
animasi-fungsi masa: kubik-bezier (0.755, 0.050, 0.855, 0.060);
mengubah: translate3d (0, -15px, 0);
}
90% {
mengubah: translate3d (0, -4px, 0);
}
}
.bounce {
animasi-nama: melantun;
transform-origin: bottom center;
}
Mengambil animasi lebih lanjut dengan Animate.css
Urutan di atas menambah kesan melantun apabila halaman pertama memuatkan, yang sejuk tetapi satu masa. Bagaimana pula kita menambahnya untuk bergerak. Dengan cara itu, setiap kali seseorang membelok ke atas ujian, ia melantun. Ia bukan sesuatu yang saya akan lakukan di laman web pengeluaran, tetapi ia adalah cara yang baik untuk menunjukkan bagaimana semuanya berfungsi.
Tambah kod berikut kepada CSS anda untuk menambahkan lantunan pada kesan hover. Setiap kali tetikus melayang ke atas elemen, ia harus melantun.
.animated: hover {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
tempoh animasi: 1s;
-webkit-animation-fill-mode: kedua-duanya;
-moz-animation-fill-mode: kedua-duanya;
-ms-animation-fill-mode: kedua-duanya;
-o-animation-fill-mode: kedua-duanya;
animasi-mengisi-mod: kedua-duanya;
}
Sekiranya anda mengetahui CSS, anda akan mengetahui lebih baik daripada saya mengenai bagaimana untuk melaksanakan kesan yang berbeza untuk tindakan yang berbeza. Sebagai pemula, ini dan perpustakaan yang disediakan dalam Animate.css membantu saya membuat animasi asas, tetapi berkesan untuk laman web saya.
Saya tidak tahu berapa banyak yang saya akan gunakan di laman web secara langsung kerana mereka tidak selalu turun terlalu baik dan pengguna mudah alih tidak kelihatan seperti mereka sama sekali. Walau bagaimanapun, sebagai pengajaran bagaimana CSS berfungsi dan bagaimana ia dapat digunakan untuk meningkatkan web, itu adalah sumber yang hebat. Saya hanya seorang pemula tetapi juga menghabiskan beberapa jam dengan Animate.css untuk tutorial ini telah mengajar saya banyak. Saya fikir saya akan bermain dengan lebih banyak sebelum saya selesai. Bagaimana dengan awak?
