Peralihan dan Animasi CSS

Kuliah 7: Peralihan dan Animasi CSS

Dalam kuliah ini, kami akan meneroka cara menghidupkan halaman web anda menggunakan peralihan dan animasi CSS. Teknik ini membolehkan anda mencipta kesan licin dan menarik yang meningkatkan pengalaman pengguna tanpa memerlukan JavaScript.

Pengenalan kepada Peralihan CSS

Peralihan CSS membolehkan anda menukar nilai hartanah dengan lancar dalam tempoh tertentu. Ia sesuai untuk mencipta kesan tuding, animasi butang dan elemen interaktif lain.

1. Sintaks Asas

Untuk membuat peralihan, anda perlu menentukan sifat CSS kepada peralihan, tempoh dan fungsi pelonggaran pilihan.

• Contoh:

  .button {
    background-color: #4CAF50;
    transition: background-color 0.3s ease;
  }

  .button:hover {
    background-color: #45a049;
  }

Dalam contoh ini, warna latar belakang butang berubah dengan lancar selama 0.3 saat apabila dituding.

2. Peralihan Pelbagai Sifat

Anda boleh mengalihkan berbilang sifat serentak dengan memisahkannya dengan koma.

• Contoh:

  .box {
    width: 100px;
    height: 100px;
    background-color: #333;
    transition: width 0.5s, height 0.5s, background-color 0.5s;
  }

  .box:hover {
    width: 150px;
    height: 150px;
    background-color: #555;
  }

Contoh ini menukar lebar, ketinggian dan warna latar belakang kotak pada tuding dengan lancar.

3. Fungsi Meringankan

Fungsi pelonggaran mengawal kelajuan peralihan pada titik yang berbeza, mencipta kesan seperti pelonggaran masuk, pelonggaran atau kedua-duanya sekali.

• Fungsi pelonggaran biasa:
  • kemudahan: Bermula perlahan, kemudian mempercepatkan, kemudian perlahan semula.
  • linear: Mengekalkan kelajuan malar.
  • kemudahan masuk: Bermula dengan perlahan, kemudian dipercepatkan.
  • ease-out: Bermula dengan cepat, kemudian perlahan.

Pengenalan kepada Animasi CSS

Animasi CSS membolehkan anda mencipta urutan perubahan yang lebih kompleks dari semasa ke semasa, melangkaui peralihan mudah. Anda boleh menghidupkan berbilang sifat, mengawal masa dan mencipta bingkai utama untuk kawalan yang lebih baik.

1. Sintaks Asas

Untuk mencipta animasi, tentukan bingkai utama dan gunakannya pada elemen menggunakan sifat animasi.

• Contoh:

  @keyframes example {
    0% {background-color: red; left: 0px;}
    50% {background-color: yellow; left: 100px;}
    100% {background-color: green; left: 0px;}
  }

  .animate-box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 5s infinite;
  }

Dalam contoh ini:

• Peraturan @keyframes mentakrifkan langkah animasi, menukar warna latar belakang dan kedudukan.
• Kelas .animate-box menggunakan animasi, yang berjalan selama 5 saat dan berulang tanpa had.

2. Mengawal Masa Animasi

Anda boleh mengawal masa, kelewatan dan kiraan lelaran sesuatu animasi.

• Contoh:

  .animate-box {
    animation: example 5s ease-in-out 1s 3 alternate;
  }

• 5s: Tempoh animasi.
• ease-in-out: Fungsi pelonggaran.
• 1s: Lengah sebelum animasi bermula.
• 3: Animasi akan berulang tiga kali.
• ganti: Animasi akan berbalik arah pada setiap lelaran.

3. Menggabungkan Peralihan dan Animasi

Anda boleh menggunakan peralihan dan animasi bersama-sama untuk mencipta kesan yang lebih dinamik.

• Contoh:

  .button {
    background-color: #4CAF50;
    transition: transform 0.3s ease;
  }

  .button:hover {
    transform: scale(1.1);
  }

  @keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }

  .pulse-button {
    animation: pulse 1s infinite;
  }

Contoh ini:

• Kelas .button menggunakan peralihan untuk menskalakan sedikit butang pada tuding.
• Kelas .pulse-button menggunakan animasi untuk mencipta kesan berdenyut berterusan.

Contoh Praktikal:

Mari gabungkan peralihan dan animasi untuk mencipta butang responsif dan interaktif.

HTML:

<button class="animated-button">Hover Me!</button>

CSS:

.animated-button {
  padding: 15px 30px;
  font-size: 16px;
  color: white;
  background-color: #008CBA;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.animated-button:hover {
  background-color: #005f73;
  transform: translateY(-5px);
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.animated-button:active {
  animation: shake 0.5s;
}

Dalam contoh ini:

• Butang menukar warna latar belakangnya dan bergerak ke atas sedikit apabila dilegar.
• Apabila butang diklik, ia bergegar menggunakan animasi tersuai.

Amalkan Senaman

1. Buat kesan tuding untuk pautan yang menukar warnanya dan menambah garis bawah menggunakan peralihan.
2. Buat animasi bingkai utama yang menggerakkan elemen dalam bulatan.
3. Gabungkan peralihan dan animasi untuk mencipta elemen interaktif seperti butang atau kad yang berskala, menukar warna atau menghidupkan semasa interaksi.

Seterusnya: Dalam kuliah seterusnya, kami akan meneroka CSS Flexbox Deep Dive, di mana anda akan belajar cara menggunakan Flexbox sepenuhnya untuk mencipta reka letak yang maju dan responsif. Nantikan!

ikuti saya di LinkedIn

Ridoy Hasan

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