Menguasai konsep animasi asas CSS

Animasi CSS: keajaiban yang memberikan kecergasan dan pergerakan tapak web

Animasi CSS berfungsi seperti sihir, menjadikan tapak web lebih dinamik dan menarik. Animasi membolehkan anda memindahkan elemen tapak web dengan mudah, menukar warnanya dan mengubah saiznya dengan lancar.

Untuk menjadikan animasi anda lebih interaktif dan lancar, anda perlu memahami konsep animasi asas terlebih dahulu. Dalam artikel ini, anda akan mempelajari sintaks peraturan asas dan sifat animasi animasi untuk mengawal tingkah laku animasi.

Jom mulakan! ?

Untuk mula menggunakan animasi CSS, anda perlu mengetahui dua komponen asas:

• @keyframes: Rangka tindakan untuk animasi.
• Sifat animasi: Kawal tetapan animasi.

@bingkai kunci

@keyframes ialah peta jalan untuk animasi anda, di mana anda menentukan titik mula dan akhir animasi anda serta langkah di antaranya.

Ini bermakna, bahagian ini mentakrifkan cara animasi bermula, cara ia berjalan di tengah dan cara ia berakhir.

Tatabahasa:

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

Contohnya:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

Dalam contoh ini, kelegapan elemen akan bermula pada 0 dan pergi ke 1.

Sebelum meneruskan, lihat e-buku ini yang akan menjadikan anda pakar animasi CSS:

? Asas Animasi CSS: Amalan Terbaik, Trik dan Petua Prestasi

Dari pudar mudah kepada animasi yang kompleks, e-buku ini merangkumi semua yang anda perlukan untuk menguasai animasi CSS, termasuk:

• Fungsi masa
• Kerangka kunci dan proses animasi
• Pengoptimuman prestasi
• Aplikasi Dunia Sebenar

Sesuai untuk pembangun yang ingin mencipta animasi CSS yang lancar. Dapatkan salinan anda sekarang!

Sifat Animasi

Untuk menyesuaikan animasi CSS, sifat yang berbeza digunakan, setiap satunya mempunyai peranan tersendiri dan mentakrifkan kelakuan animasi.

Sifat animasi digunakan terus pada elemen, mentakrifkan nama animasi, tempoh, kelewatan, arah, dsb.

Tatabahasa:

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

Contohnya:

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 动画名称 */
   animation-duration: 2s; /* 动画持续时间 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可见 */
   }
   to {
     opacity: 1; /* 可见 */
   }
}</code>

Dalam contoh ini, elemen dengan nama kelas "kotak" pada mulanya akan menjadi tidak kelihatan dan akan kelihatan selepas dua saat, mewujudkan kesan pudar masuk yang lancar.

Dalam CSS anda mempunyai sifat animasi berikut:

• nama-animasi
• tempoh-animasi
• fungsi pemasaan-animasi
• penangguhan-animasi
• kiraan-lelaran-animasi
• arah-animasi
• mod-isi-animasi
• keadaan-main-animasi

Sekarang, mari kita fahami setiap atribut.

nama-animasi

Fungsi:

Atribut ini digunakan untuk menentukan animasi @keyframes yang harus digunakan.

Contohnya, jika anda mempunyai dua @keyframes bernama fadeIn atau fadeOut, anda boleh menggunakan atribut animation-name untuk menentukan elemen mana animasi fadeIn harus digunakan dan pada elemen mana animasi fadeOut harus digunakan.

Tatabahasa:

<code>animation-name: animationName;</code>

Contohnya:

<code>animation-name: fadeIn;</code>

Atribut nama animasi diperlukan untuk menjalankan animasi.

tempoh-animasi

Fungsi:

Harta ini mentakrifkan tempoh animasi, iaitu berapa lama masa yang diambil untuk animasi berjalan.

Anda boleh menentukan tempoh animasi dalam saat (s) atau milisaat (ms).

Tatabahasa:

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

Contohnya:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

Jika anda tidak mentakrifkan tempoh animasi, ia akan ditetapkan secara automatik kepada 0s (lalai), yang akan membatalkan animasi dengan berkesan.

fungsi pemasaan-animasi

Fungsi:

Atribut ini digunakan untuk menentukan mod kelajuan animasi. Ini bermakna anda boleh menggunakan sifat ini untuk menentukan sama ada animasi bermula dengan perlahan, berjalan pada kelajuan tetap atau berjalan dengan cepat.

Ia mempunyai nilai berikut:

• linear: Animasi akan berjalan pada kelajuan tetap.
• kemudahan: bermula dengan perlahan, cepat di tengah, dan berakhir dengan perlahan.
• kemudahan masuk: Mulakan perlahan-lahan.
• kelonggaran: Tamat perlahan-lahan.
• kemudahan masuk: Permulaan perlahan dan tamat perlahan.
• kubik-bezier(x1, y1, x2, y2): Mod kelajuan tersuai.

Contoh:

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

penangguhan-animasi

Fungsi:

Harta ini menentukan berapa lama animasi akan menunggu sebelum bermula, iaitu kelewatan animasi.

Tatabahasa:

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 动画名称 */
   animation-duration: 2s; /* 动画持续时间 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可见 */
   }
   to {
     opacity: 1; /* 可见 */
   }
}</code>

Contoh:

<code>animation-name: animationName;</code>

kiraan-lelaran-animasi

Fungsi:

Atribut ini digunakan untuk menentukan bilangan ulangan animasi, iaitu, berapa kali animasi akan berulang.

Ia mempunyai nilai berikut:

• 1: Animasi hanya akan dijalankan sekali (ini adalah lalai).
• tak terhingga: Animasi akan berulang secara berterusan.
• Sebarang Nombor: Animasi akan dijalankan mengikut bilangan kali yang anda tentukan.

Contoh:

<code>animation-name: fadeIn;</code>

arah-animasi

Fungsi:

Harta ini mentakrifkan arah animasi.

Ia mempunyai nilai berikut:

• biasa: Animasi akan berjalan ke hadapan (ini adalah lalai).
• terbalik: Animasi akan berjalan secara terbalik.
• ganti: Animasi akan berjalan secara bergilir-gilir, sekali ke hadapan dan sekali ke belakang.
• balik-balik: Animasi mula-mula akan berjalan secara terbalik, kemudian ke hadapan.

Contoh:

<code>animation-duration: time;</code>

mod-isi-animasi

Fungsi:

Atribut ini digunakan untuk menentukan gaya elemen sebelum animasi bermula dan selepas ia tamat. Ia mentakrifkan gaya yang harus digunakan pada elemen apabila animasi tidak dimainkan.

Ia membolehkan anda mengawal penampilan elemen sebelum dan selepas animasi, memberikan anda lebih fleksibiliti semasa menguruskan keadaan elemen semasa animasi.

Ia mempunyai nilai berikut:

• tiada: Tiada gaya digunakan sebelum atau selepas animasi.
• ke hadapan: Kekalkan gaya akhir animasi.
• ke belakang: Ini juga akan menggunakan gaya permulaan animasi dalam masa tunda.
• kedua-duanya: Kendalikan gaya permulaan dan akhir.

Contoh:

<code>animation-duration: 4s; /* 动画将运行4秒 */</code>

keadaan-main-animasi

Fungsi:

Atribut ini menentukan keadaan animasi: berjalan atau dijeda.

Ia mempunyai nilai berikut:

• berjalan: Animasi akan diteruskan.
• dijeda: Animasi akan dihentikan tetapi keadaan akan dikekalkan.

Contoh:

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

Harta ini digunakan untuk animasi interaktif, contohnya, menjeda animasi pada tuding.

Sintaks trengkas animasi

Pendek kata animasi membolehkan anda menentukan berbilang sifat animasi dalam satu baris. Anda boleh menggabungkannya menjadi satu baris untuk meningkatkan kebolehbacaan dan bukannya menulis setiap sifat animasi satu demi satu.

Tatabahasa:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

Contoh:

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

Di sini,

• slaid: Nama animasi.
• 3s: Tempoh animasi ialah 3 saat.
• kemudahan-masuk-keluar: Fungsi bermasa ialah mudah-masuk-keluar, yang bermaksud animasi akan dimulakan perlahan-lahan, dipercepatkan dan kemudian diperlahankan semula.
• 1s: Animasi akan bermula selepas kelewatan 1 saat.
• tak terhingga: Animasi akan berulang tanpa had.
• ganti: Animasi akan bergantian antara bergerak ke hadapan dan ke belakang pada setiap lelaran.
• ke hadapan: Gaya yang digunakan pada bingkai utama terakhir (pada 100%) akan dikekalkan selepas animasi selesai.

Helaian Penipuan Animasi

Saya telah mencipta Helaian Penipuan Animasi CSS yang merangkumi semua konsep, sifat dan sintaks utama yang digunakan dalam animasi CSS.

Anda boleh memuat turun helaian cheat di GitHub dengan mengklik pautan di bawah:

https://www.php.cn/link/02f5df8adf0db026d38425594e68a007

Itu sahaja.

Saya harap ia membantu.

Terima kasih kerana membaca.

Jika anda mendapati artikel saya membantu dan ingin menyokong kerja saya, sila pertimbangkan untuk membeli saya kopi☕.

Untuk lebih banyak kandungan seperti ini, klik di sini.

Ikuti saya di X (Twitter) untuk petua pembangunan web harian.

Teruskan pengekodan! !

Atas ialah kandungan terperinci Menguasai konsep animasi asas CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!