Animate.css sudah ada beberapa tahun sekarang dan saya harus mengaku terlambat ke pesta. Saya baru menemukannya beberapa bulan yang lalu ketika mencari-cari beberapa tutorial animasi CSS dan menemukan apa yang menjadi cara tercepat dan termudah untuk bernyawa, Animate.css.
Dibuat oleh seorang pria bernama Dan Eden, Animate.css adalah cara cepat untuk melihat bagaimana CCS bekerja dan mendapatkan beberapa aksi animasi di situs web Anda.
Digambarkan sebagai 'Hanya-menambahkan animasi CSS air' Animate.css adalah sedikit bersenang-senang dengan sisi serius. Hal ini memungkinkan bahkan perancang web amatir seperti saya sendiri untuk segera memahami dasar-dasar animasi CSS dan menciptakan efek sederhana namun efektif untuk situs web. Dari satu judul beranimasi ke gerakan yang lebih terlibat, alat ini dapat melakukannya.
Animate.css
Animate.css tersedia untuk diunduh dari GitHub dan pada dasarnya adalah sebuah perpustakaan efek CSS sederhana yang dikumpulkan di satu tempat. Setiap animasi dikemas dengan baik dan siap digunakan. Yang perlu Anda lakukan adalah menemukan animasi yang Anda suka dan menerapkan kelas. Itu benar-benar ada untuk itu.
Anda tidak perlu mengunduh seluruh pustaka jika Anda tidak ingin karena ada 2.500 baris kode di dalamnya. Anda dapat mengunjungi situs Animate.css, cari animasi dan klik tautan Unduh Animate.css. Ini memuat kelas ke halaman web untuk Anda salin dan gunakan sesuai keinginan Anda.
Akan lebih mudah menggunakan GitHub dan menelusuri untuk menemukan efek yang Anda cari.
- Arahkan ke halaman GitHub css.
- Klik tautan Sumber untuk mengakses daftar elemen.
- Pilih jenis efek yang Anda cari dari daftar. Bounce adalah pencari perhatian, jadi pilih tautan perhatian_seeker.
- Pilih bounce.css.
- Salin kode dan letakkan di halaman Anda untuk menerapkan animasi.
Sesederhana itu. Anda jelas akan memilih opsi yang berbeda untuk efek yang berbeda tetapi hasil akhirnya adalah sama. Akses ke kode yang diperlukan untuk melakukan pengangkatan berat pada halaman.
Membangun objek animasi dengan Animate.css
Membangun sesuatu yang keren dengan Animate.css itu sederhana. Ini hanya masalah menemukan kode CCS dan menambahkannya ke CSS Anda sendiri. Jika saya bisa melakukannya, siapa pun bisa!
Opsi pertama pada halaman Animate.css terpental, jadi mari kita gunakan itu dalam contoh ini.
- Tempel '' di dalam stylesheet Anda.
- Temukan CSS untuk animasi yang Anda inginkan dan tambahkan ke elemen yang ingin Anda animasikan. Misalnya, tambahkan '' untuk menambahkan efek pantulan untuk menguji, gambar atau apa pun.
- Tambahkan kode CSS berikut untuk membuatnya berfungsi. Diambil dari bounce.css di atas.
@keyframes bangkit {
dari, 20%, 53%, 80%, hingga {
animasi-waktu-fungsi: kubik-bezier (0, 215, 0, 610, 0, 355, 1.000);
transform: translate3d (0, 0, 0);
}
40%, 43% {
animasi-waktu-fungsi: kubik-bezier (0, 755, 0, 050, 0, 855, 0, 060);
transform: translate3d (0, -30px, 0);
}
70% {
animasi-waktu-fungsi: kubik-bezier (0, 755, 0, 050, 0, 855, 0, 060);
transform: translate3d (0, -15px, 0);
}
90% {
transform: translate3d (0, -4px, 0);
}
}
.bounce {
nama-animasi: pentalan;
transform-origin: pusat bawah;
}
Mengambil animasi lebih jauh dengan Animate.css
Urutan di atas menambahkan efek bouncing ketika halaman pertama memuat, yang keren tetapi hal satu kali. Bagaimana kalau kita tambahkan ke hover. Dengan cara itu, setiap kali seseorang melayang-layang di atas tes, itu memantul. Ini bukan sesuatu yang akan saya lakukan di situs web produksi, tetapi ini adalah cara yang bagus untuk menunjukkan cara kerja semuanya.
Tambahkan kode berikut ke CSS Anda untuk menambahkan bouncing pada efek mengambang. The, setiap kali mouse melayang di atas elemen, itu harus memantul.
.animated: hover {
-webkit-animasi-durasi: 1s;
-moz-animasi-durasi: 1s;
-ms-animation-duration: 1s;
durasi -o-animasi: 1s;
durasi animasi: 1s;
-webkit-animasi-mengisi-mode: keduanya;
-moz-animation-fill-mode: keduanya;
-ms-animation-fill-mode: keduanya;
-o-animasi-mengisi-mode: keduanya;
mode pengisian animasi: keduanya;
}
Jika Anda tahu CSS, Anda akan tahu jauh lebih baik daripada saya tentang bagaimana menerapkan efek yang berbeda untuk tindakan yang berbeda. Sebagai seorang pemula, ini dan perpustakaan yang disediakan di Animate.css membantu saya membuat animasi dasar, tetapi efektif untuk halaman web saya.
Saya tidak tahu berapa banyak yang akan saya gunakan di situs web langsung karena mereka tidak selalu turun terlalu baik dan pengguna seluler sepertinya tidak terlalu menyukai mereka. Namun, sebagai pelajaran bagaimana CSS bekerja dan bagaimana itu dapat digunakan untuk meningkatkan web, ini adalah sumber yang bagus. Saya hanya seorang pemula tetapi bahkan menghabiskan beberapa jam dengan Animate.css untuk tutorial ini telah mengajari saya banyak hal. Saya pikir saya akan bermain dengan itu lebih banyak sebelum saya selesai. Bagaimana dengan kamu?
