Bagaimana untuk bermain dengan animasi css? (susun dan kongsi)

Artikel ini membawakan anda pengetahuan yang berkaitan tentang animasi dalam CSS, termasuk apa itu animasi, cara memanggil animasi dan cara melaksanakan animasi berbilang bingkai kunci saya harap ia akan membantu anda.

1 Apakah animasi

Dalam CSS, anda boleh menggunakan @keyframes untuk mentakrifkan animasi
(keyframes bermaksud " Kerangka utama")

Struktur umum:

@keyframes rotation { /* rotation 动画名 */
    from {   /* 起始状态 */ 
        transform: rotate(0);
    }
    to {    /* 结束状态 */ 
        transform: rotate(360deg);
    }}

---

2. Animasi panggilan

Selepas mentakrifkan animasi, anda boleh menggunakan atribut animasi untuk memanggil animasi.

Atribut asas animasi:

• nama: nama animasi
  (nilai lalai awal tiada)
• tempoh: tempoh animasi
  ( nilai lalai awal 0s)
• fungsi pemasaan: tukar lengkung kelajuan
  (kemudahan nilai lalai awal)
• kelewatan: masa tunda (berapa lama masa berlalu sebelum animasi bermula)
  ( nilai lalai awal 0s)
• kiraan lelaran: bilangan pelaksanaan animasi
  (nilai lalai awal 1, jika anda mahu animasi dilaksanakan selama-lamanya, tulis infiniti)

animation:  name | duration | timing function | delay | iteration-count;

Selain itu, terdapat Beberapa atribut:

arah animasi (tetapkan sama ada hendak memainkan animasi secara terbalik)

• biasa: main animasi dengan cara biasa (nilai lalai awal)
• terbalik: Mainkan animasi dengan cara yang bertentangan
• bergantian: Biarkan yang ke-2, ke-4, ke-6...(kali bernombor genap) daripada animasi diterbalikkan secara automatik
• terbalik-balik: Biarkan animasi Perlaksanaan terbalik automatik beberapa kali ganjil
  

mod isian-animasi (tetapkan keadaan animasi apabila animasi tidak dimainkan)

• tiada : Jangan ubah tingkah laku lalai animasi
• ke hadapan: Hentikan animasi pada keadaan akhir akhir
• ke belakang: Gunakan animasi dalam bingkai utama pertama dalam tempoh masa yang ditentukan oleh Gaya kelewatan animasi
• kedua-duanya: ikut peraturan ke hadapan dan ke belakang pada masa yang sama
  

animation-play-state (tetapkan sama ada animasi dimainkan atau dijeda)

• jeda: Jeda main balik animasi
• berjalan: Main animasi biasanya

---

3. Animasi berbilang bingkai kunci

Bagi mereka yang ingin mencapai animasi dengan pelbagai kesan, anda boleh menggunakan berbilang bingkai utama pada masa ini.

Struktur umum:

@keyframes changeColor {
	0% {
		background-color: red;
	}
	20% {
		background-color: orange;
	}
	40% {
		background-color: blue;
	}
	100% {
		background-color: green;
	}}

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk bermain dengan animasi css? (susun dan kongsi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!