Kunci animasi CSS adalah untuk menguasai penggunaan @Keyframes dan atribut animasi. 1. @KeyFrames digunakan untuk menentukan kerangka utama animasi, dan menetapkan keadaan pelbagai peringkat animasi melalui dari/ke atau peratusan; 2. Atribut animasi menggunakan animasi kepada elemen, termasuk tetapan seperti nama, tempoh, fungsi pelonggaran, kelewatan dan bilangan main balik; 3. Kod ini dapat dipermudahkan dengan atribut disingkat, dan kesan main balik yang terhuyung-huyung dari pelbagai elemen dicapai menggunakan kelewatan animasi; 4. Perhatikan keserasian penyemak imbas, pengoptimuman prestasi, kaedah yang mencetuskan dan menjaga animasi mudah. Dengan menguasai perkara -perkara teras ini, anda boleh membuat animasi CSS yang lancar dan indah.

Animasi CSS sebenarnya tidak begitu sukar, terutamanya untuk pemula. Selagi anda menguasai struktur asas dan beberapa atribut utama, anda boleh membuat kesan yang lancar dan indah. Artikel ini akan bermula dengan contoh yang paling mudah dan membantu anda memahami cara menggunakan CSS untuk membuat animasi.

1. Pertama, cari tahu @keyframes

Jika anda ingin melakukan animasi, anda mesti terlebih dahulu belajar untuk menentukan kerangka key. @keyframes digunakan untuk memberitahu penyemak imbas apa animasi harus kelihatan seperti pada peringkat yang berbeza.

Sebagai contoh, jika anda ingin membuat animasi persegi kecil yang bergerak dari kiri ke kanan, anda boleh menulis seperti ini:

 @keyframes bergerak {
  dari {
    Transform: TranslateX (0);
  }
  ke {
    Transform: TranslateX (200px);
  }
}

Anda juga boleh menggunakan peratusan untuk mengawal irama yang lebih baik, seperti:

 @keyframes fadein {
  0% {Opacity: 0; }
  50% {opacity: 0.5; }
  100% {opacity: 1; }
}

Ingat: @keyframes hanya mentakrifkan "apa yang kelihatan animasi", tetapi belum digunakan untuk sebarang unsur lagi.

2. Tambahkan animasi ke elemen

Selepas menentukan animasi, langkah seterusnya adalah menggunakannya pada elemen tertentu. Ini memerlukan penggunaan atribut animation atau sub-propertiesnya.

Sebagai contoh, jika anda mahu div bergerak, anda boleh menulis seperti ini:

 .box {
  nama animasi: bergerak;
  Animasi-jangkauan: 2s;
  Animasi-masa-fungsi: mudah-dalam-keluar;
  Animasi-Delay: 0.5s;
  Animasi-mengira-kiraan: tak terhingga;
}

Ciri -ciri ini mengawal:

• Nama Animasi (mesti konsisten dengan nama @keyframes )
• Tempoh
• Fungsi pelonggaran (kaedah perubahan kelajuan)
• Berapa lama masa yang diperlukan untuk bermula
• Berapa kali bermain animasi (tak terhingga bermaksud gelung tak terhingga)

Sudah tentu anda juga boleh menyingkatnya sebagai satu baris:

 Animasi: Pindahkan 2S mudah dalam 0.5S Infinite;

3. Contoh ringkas dan praktikal: memuatkan animasi

Pemula boleh berlatih dari animasi pemuatan biasa - jenis yang muncul dan hilang dalam urutan.

Struktur HTML kira -kira seperti ini:

 <div class = "loader">
  <span>. </span>
  <span>. </span>
  <span>. </span>
</div>

Kemudian animasi CSS boleh ditulis seperti ini:

 @keyframes berkedip {
  0%, 80%, 100%{opacity: 0; }
  40% {opacity: 1; }
}

.loader span {
  paparan: blok sebaris;
  Animasi: Blink 1.4S Infinite mudah dalam kedua-duanya;
}

.loader span: nth-child (2) {
  Animasi-Delay: 0.2S;
}

.loader span: nth-child (3) {
  Animasi-Delay: 0.4s;
}

Kunci contoh ini adalah menggunakan animation-delay yang berbeza untuk setiap titik untuk mencapai kesan berperingkat.

4. Perhatikan beberapa tempat yang mudah diabaikan

• Keserasian Pelayar : Pelayar yang paling moden menyokong animation , tetapi jika anda ingin bersesuaian dengan versi lama IE, anda mungkin perlu menambah -webkit- atau awalan lain.
• Isu Prestasi : Jangan menambah animasi kompleks kepada terlalu banyak elemen, kerana ia akan menjejaskan prestasi halaman.
• Kaedah mencetuskan : Animasi lalai dilaksanakan apabila halaman dimuatkan. Jika anda mahu bergerak hanya semasa mengklik atau melayang, anda boleh menggunakan :hover atau JS untuk mengawalnya.
• Pastikan ia mudah : Jangan mengejar kesan kompleks pada mulanya, lebih penting untuk menguasai struktur asas terlebih dahulu.

Pada dasarnya itu sahaja. Animasi CSS kelihatan sedikit lagi sifat, tetapi ingat @keyframes untuk menentukan tindakan, main balik kawalan animation , dan menggabungkannya dengan beberapa atribut umum untuk membuat animasi yang baik dengan mudah.

Atas ialah kandungan terperinci Tutorial animasi CSS mudah untuk pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!