Merapikan situs web Anda menggunakan tip dan trik animasi ini.
Animasi dan transisi adalah bagian penting dari desain web. Menambahkan animasi halus ke halaman web Anda akan membuatnya lebih menarik. Animasi sederhana seperti ikon animasi, tipografi kinetik, dan logo animasi dapat membantu meningkatkan pengalaman pengguna. Pelajari lima trik animasi mengagumkan yang dapat membantu Anda memeriahkan situs web Anda.
1. Mengubah Elemen di Hover
Salah satu praktik desain yang umum adalah memiliki elemen yang meningkat ketika berinteraksi. Misalnya, Anda mungkin ingin menerjemahkan tombol sedikit ke atas saat seseorang mengarahkan mouse ke tombol tersebut. Anda dapat mencapai ini menggunakan CSS mengubah Properti.
Dengan asumsi Anda memiliki tombol:
<tombol>
Klik saya
tombol>
Anda memberi gaya pada badan dokumen serta tombolnya:
/* Meratakan tombol ke tengah halaman */
tubuh {
menampilkan: melenturkan;
tinggi: 100vh;
menyelaraskan-item: tengah;
membenarkan-konten: tengah;
warna latar belakang: hitam;
}/* Gaya tombol */
tombol {
lapisan: 1em 2em;
latar belakang: biru;
berbatasan: 0;
warna: putih;
radius perbatasan: 0.25rem;
kursor: penunjuk;
ukuran huruf: 2rem;
transisi: mengubah 500MS;
}
/* Arahkan status */
tombol:arahkan,
tombol:fokus {
mengubah: terjemahkan Y(0.75rem) 500MS;
}
Dengan blok terakhir, Anda menyetel status hover dan fokus pada tombol. Di kedua status, Anda menerjemahkan tombol di sepanjang sumbu Y sebesar 0,75rem. Tombolnya akan terlihat seperti ini:
Saat Anda mengarahkan mouse ke tombol, itu menjentikkan ke arah atas. Transisi membutuhkan waktu setengah detik (500ms) untuk diselesaikan. Ini adalah pola yang dapat Anda terapkan tidak hanya pada tombol Anda, tetapi juga pada elemen lain (misalnya gambar).
2. Mendeklarasikan Beberapa Keyframe Dengan Satu Deklarasi
Pola umum lainnya dalam animasi CSS adalah mengulangi nilai yang sama beberapa kali. Ini bisa berupa warna, ukuran, atau orientasi tertentu. Anda dapat mencapai ini dengan menggunakan Animasi keyframe CSS dengan mendeklarasikan beberapa keyframe dengan satu deklarasi.
Pertimbangkan tombol yang Anda buat di bagian sebelumnya. Mungkin Anda ingin mengulangi beberapa warna latar belakang saat Anda mengklik tombol. Tetapi Anda juga ingin menggunakan warna yang sama pada berbagai tahap animasi. Mari kita lihat bagaimana mencapainya dalam kode.
Pertama, Anda ingin menganimasikan tombol hanya saat diklik. Jadi, Anda akan membuat script.js file, di dalamnya Anda mengakses tombol dan mengaktifkan kelas pada tombol saat diklik:
const tombol = dokumen.querySelector("tombol")
button.addEventListener("klik", (e) => {
button.classList.toggle('waktunya berpesta')
})
Kami menggunakan querySelector untuk mengakses tombol dari halaman web. Untuk mempelajari lebih lanjut tentang traversal DOM, baca postingan kami di cara melintasi DOM menggunakan JavaScript.
Itu waktunya berpesta class mengaktifkan animasi berjudul berpesta:
.waktunya berpesta {
animasi: berpesta 2000MStak terbatas;
}
Untuk animasi, Anda ingin memulai dengan warna merah dan beralih ke warna kuning sebesar 25%. Kemudian Anda akan kembali ke merah di 50% sebelum kembali ke kuning di 75%. Terakhir, pada 100%, Anda akan puas dengan warna biru tua:
@keyframe berpesta {
0%, 50% {
warna latar belakang: merah;
}
25%, 75% {
warna latar belakang: kuning;
}
100% {
warna latar belakang: hsl(200, 72%, 35%);
}
}
Pendekatan ini cukup berguna untuk bergantian antara warna pada latar belakang berbasis warna. Karena Anda dapat mengulang beberapa bingkai kunci dalam satu variabel, menjadi sangat mudah untuk menggunakan properti yang sama pada berbagai tahapan animasi Anda.
3. Menggunakan @property untuk Menganimasikan Properti Khusus
Seperti yang mungkin sudah Anda ketahui, tidak semua properti di CSS dapat dianimasikan. Resmi Dokumentasi Mozilla menyimpan catatan terbaru dari semua properti CSS yang dapat dianimasikan. Jika Anda ingin menganimasikan properti yang tidak dapat dianimasikan, maka solusi terbaik Anda adalah menggunakan @Properti pengarahan.
Mulailah dengan mengubah warna latar belakang tombol Anda menjadi gradien linier:
tombol {
// lainnyaCSS
latar belakang: linier-gradien(90deg, biru, hijau);
// lainnyaCSS
}
Inilah hasilnya:
Seringkali Anda ingin menganimasikan gradien warna pada tombol. Meskipun ada trik yang dapat Anda gunakan untuk memindahkan gradien, Anda sebenarnya tidak dapat menganimasikannya. hal ini dikarenakan latar belakang (sebaik gambar latar belakang) bukan properti yang dapat dianimasikan. Di sinilah @Properti masuk.
Itu @Properti direktif memungkinkan Anda untuk mendaftarkan properti khusus. Ketika Anda menggunakan @Properti, Anda harus memberikan tiga nilai, yaitu sintaksis, mewarisi, Dan nilai awal:
@Properti --warna-1 {
sintaksis: "<warna>";
mewarisi: BENAR;
nilai awal: merah;
}
@Properti --warna-2 {
sintaksis: "<warna>";
mewarisi: BENAR;
nilai awal: biru;
}
Yang pertama adalah properti awal sedangkan yang kedua adalah properti tujuan. Sekarang, alih-alih mentransisikan gambar latar belakang (yang tidak dapat Anda transisikan), Anda akan bertransisi dari --warna-1 ke --warna-2 (properti khusus Anda) dalam satu detik:
tombol {
transisi: --warna-1 1000MS, --warna-2 1000MS;
}
Teknik ini sangat membantu karena Anda juga dapat menambahkan penyesuaian lainnya. Misalnya, Anda menambahkan penundaan untuk memberikan pengalaman yang lebih lancar. Kemungkinannya tidak terbatas.
4. Menggunakan Penundaan Animasi Negatif
Penundaan animasi sangat penting untuk membuat animasi yang halus. Mari kita lihat contohnya dalam tindakan. Di bagian ini, tambahkan a div elemen dengan 15 titik di atas tombol:
<divkelas="titik">
<divkelas="dot">div>
<divkelas="dot">div>
<divkelas="dot">div>
<divkelas="dot">div>
<divkelas="dot">div>
<divkelas="dot">div>
<divkelas="dot">div>
<divkelas="dot">div>
<divkelas="dot">div>
<divkelas="dot">div>
<divkelas="dot">div>
<divkelas="dot">div>
<divkelas="dot">div>
<divkelas="dot">div>
<divkelas="dot">div>
div>
Inilah beberapa gaya dasar untuk mengubah setiap anak div menjadi titik:
.titik {
menampilkan: melenturkan;
celah: .5rem;
margin-bawah: 20px;
}
.dot {
lebar: 10px;
rasio aspek: 1;
warna latar belakang: merah;
radius perbatasan: 50%;
}
Di sini kami menggunakan Flexbox untuk menempatkan titik-titik dalam garis horizontal. Untuk mendalami Flexbox, Anda dapat memeriksa kami Tutorial CSS Flexbox.
Di dalam script.js, tambahkan kode yang memicu animasi titik. Anda mengaktifkan menari kelas pada titik-titik:
button.addEventListener("klik", (e) => {
button.classList.toggle('waktunya berpesta')
// kode baru
titik.untukMasing-masing((dot) => {
dot.classList.toggle('menari')
})
})
Kelas dansa mengaktifkan animasi berjudul bangkit:
.dot.menari {
animasi: bangkit 2000MStak terbatasbergantian;
}Untuk animasi, cukup terjemahkan titik -100px di sepanjang sumbu Y:
@keyframe bangkit {
100% {
mengubah: terjemahkan Y(-100px)
}
}Sekarang saatnya melakukan sesuatu yang menarik. Alih-alih titik-titik naik pada saat yang sama, Anda ingin menganimasikan titik-titik tersebut agar mengalir seperti gelombang. Untuk mencapai ini, Anda harus menambahkan animasi-penundaan ke titik-titik, dan tingkatkan setiap titik sebesar 100 md:
.dot:anak ke-n (1) {
animasi-penundaan: 100MS;
}
.dot:anak ke-n (2) {
animasi-penundaan: 200MS;
}
.dot:anak ke-n (3) {
animasi-penundaan: 300MS;
}
.dot:anak ke-n (4) {
animasi-penundaan: 400MS;
}
/* Lakukan terus hingga mencapai titik ke-15 */
Ini menciptakan animasi yang ramping di mana titik-titik bergerak ke atas dan ke bawah dalam bentuk bergelombang. Gambar berikut menangkap titik-titik di tengah animasi:
Perlu diingat bahwa ini bisa menimbulkan masalah, yang membawa kita ke tip kelima.
5. Gunakan prefers-reduced-motion untuk Mengaktifkan Preferensi
Ingatlah selalu bahwa banyak orang tidak menyukai animasi berbasis gerak. Faktanya, sebagian besar pengguna memiliki preferensi di browser yang dapat mematikan gerakan. Gerakan dapat mengganggu indera, dan dalam kasus yang parah, menyebabkan mual.
Untungnya, Anda dapat dengan mudah mengatasinya dengan membungkus animasi Anda di dalam file tanpa preferensi permintaan media seperti ini:
@media(lebih suka-gerakan yang dikurangi: tanpa preferensi) {
.dot.menari {
animasi: bangkit 2000MStak terbatasbergantian;
}
}Sekarang jika Anda mengaktifkan lebih suka-dikurangi-gerakan di browser Anda, maka animasi tidak akan berjalan.
Pelajari Lebih Lanjut Tip dan Trik CSS
CSS penuh dengan peretasan luar biasa yang melampaui animasi dan transisi. Misalnya, ada tip dan trik untuk membuat keseluruhan tata letak Anda rapi dan responsif. Praktik tersebut dapat membantu Anda membuat situs web Anda lebih menarik, mudah diakses, dan menyenangkan untuk dijelajahi. Jika Anda ingin menjadi pengembang CSS satu persen teratas, memiliki beberapa trik sangat membantu.
