Animate.css sudah ada beberapa tahun sekarang dan harus saya akui terlambat datang ke pesta. Saya hanya menemukannya beberapa bulan yang lalu ketika mencari di internet untuk beberapa tutorial animasi CSS dan menemukan apa yang harus menjadi cara tercepat dan termudah untuk menghidupkan, Animate.css.
Dibuat oleh seorang pria bernama Dan Eden, Animate.css adalah cara cepat untuk melihat cara kerja CCS dan mendapatkan beberapa tindakan animasi di situs web Anda.
Digambarkan sebagai 'Cukup tambahkan animasi CSS air' Animate.css sedikit menyenangkan dengan sisi yang serius. Ini memungkinkan bahkan perancang web amatir seperti saya untuk dengan cepat memahami dasar-dasar animasi CSS dan membuat efek sederhana namun efektif untuk situs web. Dari tajuk animasi tunggal hingga gerakan yang lebih terlibat, alat ini dapat melakukannya.
Animate.css
Animate.css tersedia untuk diunduh dari GitHub dan pada dasarnya adalah 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 sukai dan menerapkan kelas. Hanya itu yang ada di sana.
Anda tidak harus mengunduh seluruh pustaka jika Anda tidak ingin karena ada 2.500 baris kode di dalamnya. Anda dapat mengunjungi situs Animate.css, menemukan animasi dan mengklik tautan Unduh Animate.css. Itu memuat kelas ke halaman web untuk Anda salin dan gunakan sesuai keinginan Anda.
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 attention_seekers.
- 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 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 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 adalah bouncing, jadi mari kita gunakan itu dalam contoh ini.
- Tempel ' ' dalam di stylesheet Anda.
- Temukan CSS untuk animasi yang Anda inginkan dan tambahkan ke elemen yang ingin Anda animasikan. Misalnya, tambahkan ' 'Untuk menambahkan efek pantulan itu untuk menguji, gambar, atau apa pun.
- Tambahkan kode CSS berikut untuk membuatnya semuanya berfungsi. Diambil dari bounce.css di atas.
@keyframe bouncing {
dari, 20%, 53%, 80%, hingga {
fungsi animasi-waktu: kubik-bezier (0, 215, 0, 610, 0, 355, 1.000);
transform: translate3d (0, 0, 0);
}
40%, 43% {
fungsi animasi-waktu: kubik-bezier (0, 755, 0, 050, 0, 855, 0, 060);
transform: translate3d (0, -30px, 0);
}
70% {
fungsi animasi-waktu: kubik-bezier (0, 755, 0, 050, 0, 855, 0, 060);
transform: translate3d (0, -15px, 0);
}
90% {
transform: translate3d (0, -4px, 0);
}
}
. bounce {
nama animasi: bouncing;
transform-origin: tengah bawah;
}
Mengambil animasi lebih jauh dengan Animate.css
Urutan di atas menambahkan efek bouncing ketika halaman pertama kali dimuat, yang keren tapi satu kali. Bagaimana kalau kita tambahkan ke hover. Dengan begitu, setiap kali seseorang melayang di atas ujian, itu memantul. Itu bukan sesuatu yang akan saya lakukan di situs web produksi, tetapi ini adalah cara yang bagus untuk menunjukkan bagaimana semuanya bekerja.
Tambahkan kode berikut ke CSS Anda untuk menambahkan bouncing saat efek melayang. Setiap kali mouse melayang di atas elemen, itu harus memantul.
.animated: hover {
-webkit-animation-durasi: 1s;
-moz-animation-durasi: 1s;
-ms-animation-durasi: 1s;
-o-animasi-durasi: 1s;
animasi-durasi: 1s;
-webkit-animation-fill-mode: keduanya;
-moz-animation-fill-mode: keduanya;
-ms-animation-fill-mode: keduanya;
-o-animation-fill-mode: keduanya;
mode animasi-isi: keduanya;
}
Jika Anda tahu CSS, Anda akan tahu jauh lebih baik daripada saya tentang bagaimana menerapkan efek berbeda untuk tindakan yang berbeda. Sebagai 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 tentang cara kerja CSS dan bagaimana hal 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 banyak mengajari saya. Saya pikir saya akan bermain lebih banyak sebelum saya selesai. Bagaimana dengan kamu?
