Animasi CSS – Menghidupkan Elemen

Kuliah 13: Animasi CSS – Menghidupkan Elemen

Selamat datang ke Kuliah 13 kursus "Asas kepada Kecemerlangan"! Dalam siaran ini, kami akan meneroka Animasi CSS—cara yang berkesan untuk menambah kehidupan pada elemen web anda dengan menganimasikannya dari semasa ke semasa. Dengan animasi CSS, anda boleh mencipta kesan licin dan dinamik yang meningkatkan pengalaman dan penglibatan pengguna.

---

1. Gambaran Keseluruhan Animasi CSS

Animasi CSS membenarkan elemen untuk beralih antara gaya yang berbeza dalam tempoh yang ditetapkan. Anda boleh mengawal cara animasi berfungsi menggunakan dua sifat utama:

• @keyframes: Mentakrifkan gelagat animasi pada saat tertentu dalam masa.
• animasi: Menggunakan animasi pada elemen dan mengawal masa dan tempohnya.

---

2. Peraturan @keyframes

Peraturan @keyframes menentukan gaya yang sepatutnya ada pada elemen pada titik yang berbeza semasa animasi. Anda menentukan bingkai utama pada pelbagai peratusan (0% sebagai permulaan, 100% sebagai penamat).

• Contoh: Animasi kerangka kunci asas untuk menukar warna latar belakang.

  @keyframes changeColor {
    0% {
      background-color: red;
    }
    100% {
      background-color: blue;
    }
  }

Dalam contoh ini:

• Warna latar belakang akan berubah secara beransur-ansur daripada merah kepada biru apabila animasi berlangsung.

---

3. Mengaplikasikan Animasi dengan animasi Property

Untuk menggunakan animasi pada elemen, anda menggunakan sifat animasi. Sifat ini memerlukan beberapa nilai utama:

• Nama: Nama animasi bingkai utama (cth., changeColor).
• Tempoh: Berapa lama animasi harus dijalankan (mis., 2s selama 2 saat).
• Fungsi Masa: Lengkung kelajuan animasi (cth., mudah, linear).

• Lengah: Berapa lama menunggu sebelum memulakan animasi.

• Contoh: Menggunakan animasi pada elemen.
  

  .box {
    animation: changeColor 2s ease-in-out infinite;
  }

Dalam kes ini:

• Elemen .box akan bertukar warna daripada merah kepada biru selama 2 saat, mengikut lengkung mudah masuk dan animasi akan berulang tanpa had.

---

4. Fungsi Masa Animasi

Fungsi pemasaan mengawal cara animasi berlangsung dari semasa ke semasa. Beberapa fungsi pemasaan biasa termasuk:

• linear: Animasi berjalan pada kelajuan tetap.
• kemudahan: Animasi bermula perlahan, dipercepatkan, kemudian perlahan.
• kemudahan masuk: Animasi bermula perlahan dan dipercepatkan.

• kemudahan: Animasi bermula dengan pantas dan perlahan.

• Contoh: Menggunakan fungsi pemasaan yang berbeza.
  

  .box {
    animation: changeColor 3s linear;
  }

Di sini:

• Animasi akan berkembang pada kelajuan tetap, mengambil masa 3 saat untuk disiapkan.

---

5. Lelaran dan Kelewatan Animasi

Anda boleh mengawal bilangan kali animasi berulang menggunakan sifat kiraan lelaran animasi. Anda juga boleh menangguhkan permulaan animasi menggunakan animasi-delay.

• Contoh: Animasi yang berulang 3 kali dan bermula selepas kelewatan 1 saat.

  .box {
    animation: changeColor 2s ease-in 3;
    animation-delay: 1s;
  }

Dalam kes ini:

• Animasi akan bermula 1 saat selepas halaman dimuatkan dan berulang 3 kali.

---

6. Mod Pengisian Animasi

Sifat mod-isi-animasi mentakrifkan rupa elemen sebelum dan selepas animasi. Nilai biasa termasuk:

• tiada: Elemen kembali kepada keadaan asalnya selepas animasi.
• ke hadapan: Elemen mengekalkan keadaan akhir animasi.

• ke belakang: Elemen mengambil keadaan awal sebelum animasi bermula.

• Contoh: Mengekalkan keadaan akhir selepas animasi.
  

  .box {
    animation: changeColor 2s ease forwards;
  }

Di sini:

• Elemen akan kekal biru selepas animasi selesai, bukannya kembali kepada merah.

---

7. Pelbagai Animasi

Anda boleh menggunakan berbilang animasi pada elemen dengan mengasingkannya dengan koma.

• Contoh: Menghidupkan kedua-dua warna dan kedudukan.

  @keyframes moveBox {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100px);
    }
  }

  .box {
    animation: changeColor 2s ease, moveBox 2s ease-in-out;
  }

Dalam kes ini:

• Kotak . akan bertukar warna dan bergerak 100px ke kanan pada masa yang sama.

---

8. Sokongan Pelayar dan Sifat Awalan

Walaupun penyemak imbas moden menyokong animasi CSS, adalah idea yang baik untuk menambah awalan vendor untuk versi penyemak imbas yang lebih lama.

• Example: Adding vendor prefixes.

  .box {
    -webkit-animation: changeColor 2s ease;
    -moz-animation: changeColor 2s ease;
    animation: changeColor 2s ease;
  }

This ensures compatibility across different browsers.

---

Practice Exercise

1. Create a bouncing ball animation using @keyframes that makes the ball move up and down smoothly.
2. Add an animation to an image that rotates it 360 degrees on hover.

---

Next Up: In the next lecture, we’ll explore CSS Transitions, which allow you to animate changes in CSS properties smoothly. You’ll learn how to create engaging hover effects and other interactions that enhance user experience.

---

follow me on LinkedIn

Ridoy Hasan

Atas ialah kandungan terperinci Animasi CSS – Menghidupkan Elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!