Farih.co.id
Home Programming 5 Tips dan Trik Animasi CSS yang Harus Anda Ketahui

5 Tips dan Trik Animasi CSS yang Harus Anda Ketahui

closeup of macbook pro on table 1

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:

 <button>
  Click me
</button>

Anda memberi gaya pada badan dokumen serta tombolnya:

 
body {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: black;
}


button {
    padding: 1em 2em;
    background: blue;
    border: 0;
    color: white;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 2rem;
    transition: transform 500ms;
}


button:hover,
button:focus {
    transform: translateY(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:

Tangkapan layar tombol biru

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 melakukannya 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 button = document.querySelector("button")
button.addEventListener("click", (e) => {
    button.classList.toggle('party-time')
})

Kami menggunakan querySelector untuk mengakses tombol dari halaman web. Untuk mempelajari lebih lanjut tentang traversal DOM, baca postingan kami tentang cara melintasi DOM menggunakan JavaScript.

Itu waktunya berpesta class mengaktifkan animasi berjudul berpesta:

 .party-time {
    animation: party 2000ms infinite;
}

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:

 @keyframes party {
    0%, 50% {
        background-color: red;
    }
    25%, 75% {
        background-color: yellow;
    }
    100% {
        background-color: 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:

 button {
     // other CSS
    background: linear-gradient(90deg, blue, green);
    // other CSS
}

Inilah hasilnya:

Cuplikan layar tombol dengan warna sementara

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 @PropertiAnda harus memberikan tiga nilai, yaitu sintaksis, mewarisiDan nilai awal:

 @property --color-1 {
  syntax: "<color>";
  inherits: true;
  initial-value: red;
}

@property --color-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: blue;
}

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:

 button {
  transition: --color-1 1000ms, --color-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 mulus. Mari kita lihat contohnya dalam tindakan. Di bagian ini, tambahkan a div elemen dengan 15 titik di atas tombol:

 <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>

Inilah beberapa gaya dasar untuk mengubah setiap anak div menjadi titik:

 .dots {
    display: flex;
    gap: .5rem;
    margin-bottom: 20px;
}
.dot {
    width: 10px;
    aspect-ratio: 1;
    background-color: red;
    border-radius: 50%;
}

Di sini kami menggunakan Flexbox untuk menempatkan titik-titik dalam garis horizontal. Untuk mendalami Flexbox, Anda dapat melihat tutorial CSS Flexbox kami.

Di dalam script.js, tambahkan kode yang memicu animasi titik. Anda mengaktifkan menari kelas pada titik-titik:

 button.addEventListener("click", (e) => {
    button.classList.toggle('party-time')

    
    dots.forEach((dot) => {
        dot.classList.toggle('dance')
    })
})

Kelas dansa mengaktifkan animasi berjudul bangkit:

 .dot.dance {
    animation: rise 2000ms infinite alternate;
}

Untuk animasi, cukup terjemahkan titik -100px di sepanjang sumbu Y:

 @keyframes rise {
    100% {
        transform: translateY(-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:nth-child(1) {
    animation-delay: 100ms;
}
.dot:nth-child(2) {
    animation-delay: 200ms;
}
.dot:nth-child(3) {
    animation-delay: 300ms;
}
.dot:nth-child(4) {
    animation-delay: 400ms;
}

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:

Cuplikan layar menunjukkan sekumpulan titik yang bergerak dalam bentuk gelombang

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 gerakan. 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(prefers-reduced-motion: no-preference) {
  .dot.dance {
    animation: rise 2000ms infinite alternate;
  }
}

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.

Comment
Share:

Leave a Reply

Your email address will not be published. Required fields are marked *

beli jitu https://167.71.217.241/ https://188.166.210.27/ https://103.253.147.8/ https://139.59.194.132/ https://152.42.192.54/ https://152.42.187.123/ https://188.166.196.248/ https://163.47.9.78/ https://157.230.245.144/ http://68.183.96.87/ http://147.182.210.122/ http://147.182.128.234/ http://167.172.1.184/ http://157.245.5.74/ http://139.59.217.59/ http://163.47.9.16/ http://144.126.251.215/ http://139.59.217.128/ http://103.186.0.254/ http://161.35.251.176/ http://157.245.29.71/ https://170.64.254.102/ https://www.markas303.ac.id/ https://www.markas303.or.id/ https://www.markas303.sch.id/ http://103.172.205.75/ http://103.245.38.119/ http://138.197.224.231/ http://138.197.224.231/

Ad

BIJI18 BIJI18 https://goremekoop.com/ AGEN77 3DBET OBOR138 GACOR168JP YING77 RUMAH258 POHONHOKI99 ASALBET88 PARIS128 66KBET LONG111 DESA333 DEWAGACOR89 YING77
https://146.190.200.68/ https://188.166.204.36/