@KeyFrames CSS: Contoh kod terbaik

CSS @KeyFrames digunakan untuk menentukan pelbagai peringkat dan perubahan animasi. 1) Penggunaan Asas: Tentukan animasi melalui @keyframes, seperti Fadein berubah dari telus ke legap. 2) Animasi Loop: Gunakan kata kunci tak terhingga untuk membuat kesan putaran berterusan. 3) Pengoptimuman Prestasi: Gunakan atribut yang akan berubah untuk meningkatkan kelancaran animasi. 4) Kebolehcapaian: Laraskan animasi untuk memenuhi keutamaan pengguna melalui pertanyaan media gerakan yang lebih tinggi. 5) Kawalan fleksibel: Campurkan pembolehubah CSS untuk mencapai animasi perubahan warna. 6) Laraskan kesan: Buat animasi lebih semula jadi dengan mengubah suai tempoh dan fungsi masa.

Peraturan CSS @keyframes adalah teras animasi, yang mentakrifkan pelbagai peringkat dan perubahan animasi. Dalam artikel ini, kami akan menyelam bagaimana menggunakan @keyframes untuk mewujudkan kesan animasi yang kaya, bukan hanya peralihan mudah, tetapi juga beberapa senario aplikasi yang kompleks dan amalan terbaik.

Ketika datang ke aplikasi @keyframes , kita perlu mempertimbangkan kepentingannya dalam reka bentuk web moden. Animasi bukan sahaja hiasan visual, tetapi juga cara penting untuk meningkatkan pengalaman pengguna. Dengan @keyframes kita dapat mengawal perubahan elemen pada garis masa, menghasilkan kesan animasi yang lancar dan menarik.

Mari kita mulakan dengan contoh mudah untuk menggambarkan penggunaan asas @keyframes :

 @keyframes fadein {
  dari {
    Kelegapan: 0;
  }
  ke {
    Kelegapan: 1;
  }
}

.fade-in {
  Animasi: Fadein 2s mudah;
}

Dalam contoh ini, kita menentukan animasi yang dipanggil fadeIn , yang secara beransur -ansur berubah dari sepenuhnya telus ( opacity: 0 ) kepada kelegapan sepenuhnya ( opacity: 1 ). Kami kemudian memohon animasi ini ke elemen dengan kelas fade-in , tetapkan tempoh animasi hingga 2 saat, dan gunakan ease-in sebagai kesan peralihan.

Sekarang, mari kita meneroka lebih banyak petua penggunaan @keyframes 'dan beberapa aplikasi lanjutan.

Pertama, kita boleh menggunakan @keyframes untuk membuat animasi gelung, yang sangat berguna ketika membuat petunjuk beban atau animasi latar belakang:

 @keyframes berputar {
  dari {
    transform: putar (0deg);
  }
  ke {
    Transform: Putar (360Deg);
  }
}

.loading-spinner {
  Animasi: Spin 1S linear tak terhingga;
}

Dalam contoh ini, animasi spin menyebabkan unsur -unsur berputar secara berterusan, dan kata kunci infinite memastikan bahawa gelung animasi tidak terhingga. linear memastikan kelajuan putaran yang berterusan dan tidak mempunyai kesan pecutan dan penurunan seperti ease-in .

Apabila menggunakan @keyframes , kita juga perlu memberi perhatian kepada prestasi animasi. Animasi yang terlalu kompleks boleh menyebabkan kemerosotan prestasi halaman, terutamanya pada peranti mudah alih. Untuk mengoptimumkan prestasi, kita boleh menggunakan atribut will-change untuk mendorong penyemak imbas yang akan berubah, untuk menyediakan terlebih dahulu:

 @KeyFrames Slidein {
  dari {
    Transform: TranslateX (-100%);
  }
  ke {
    Transform: TranslateX (0);
  }
}

.slide-in {
  Will-change: Transform;
  Animasi: Slidein 0.5s mudah keluar;
}

Di sini, kami menggunakan will-change: transform untuk memberitahu penyemak imbas bahawa atribut transform akan berubah, yang membantu meningkatkan kelancaran animasi.

Satu lagi aspek yang perlu dipertimbangkan ialah kebolehcapaian animasi. Animasi boleh menyebabkan ketidakselesaan di kalangan beberapa pengguna, terutama mereka yang mengalami gangguan epilepsi atau dismotik. Untuk melakukan ini, kita boleh menggunakan pertanyaan media prefers-reduced-motion untuk mengesan keutamaan pengguna dan menyesuaikan animasi dengan sewajarnya:

 @keyframes fadein {
  dari {
    Kelegapan: 0;
  }
  ke {
    Kelegapan: 1;
  }
}

.fade-in {
  Animasi: Fadein 2s mudah;
}

@media (lebih suka-dikurangkan-gerakan: mengurangkan) {
  .fade-in {
    Animasi: Tiada;
  }
}

Dengan tetapan ini, animasi kami akan dilumpuhkan apabila pengguna membolehkan pilihan Gerakan Mengurangkan, dengan itu meningkatkan kebolehcapaian laman web.

Dalam projek sebenar, saya mendapati bahawa @keyframes boleh digunakan bersamaan dengan pembolehubah CSS (sifat tersuai) untuk mencapai kawalan animasi yang lebih fleksibel. Sebagai contoh, kita boleh menentukan animasi perubahan warna dan menggunakan pembolehubah CSS untuk mengawal warna:

 : root {
  --Tart-color: #FF0000;
  -Enend-color: #00FF00;
}

@KeyFrames ColorChange {
  dari {
    latar belakang warna: var (-permulaan warna);
  }
  ke {
    latar belakang warna: var (-warna akhir);
  }
}

.Color-change {
  Animasi: ColorChange 3s mudah-in-out tak terhingga;
}

Dalam contoh ini, kami menggunakan pembolehubah CSS untuk menentukan warna permulaan dan akhir animasi, supaya kesan animasi dapat diselaraskan dengan mudah tanpa mengubah peraturan @keyframes .

Akhirnya, saya ingin berkongsi masalah yang saya hadapi: Apabila menggunakan @keyframes , jika animasi berlangsung terlalu pendek, ia boleh menyebabkan animasi kelihatan tidak cukup lancar. Untuk menyelesaikan masalah ini, saya biasanya menyesuaikan tempoh animasi dan mencuba timing-function yang berbeza untuk mencari hasil yang terbaik:

 @KeyFrames Bounce {
  0%, 100% {
    Transform: Translate (0);
  }
  50% {
    Transform: Translatey (-20px);
  }
}

.bounce {
  Animasi: Bounce 0.8s Ease-In-Out Infinite;
}

Dalam contoh ini, saya mendapati bahawa menetapkan masa animasi hingga 0.8 saat dan menggunakan ease-in-out fungsi masa menjadikan kesan lantunan lebih semula jadi dan licin.

Secara umum, @keyframes adalah alat yang kuat dan fleksibel dalam CSS, di mana kita boleh membuat pelbagai kesan animasi yang kompleks dan menarik. Melalui pengenalan dan contoh artikel ini, saya harap anda dapat lebih memahami bagaimana @keyframes digunakan dan fleksibel menggunakan teknik ini dalam projek -projek sebenar.

Atas ialah kandungan terperinci @KeyFrames CSS: Contoh kod terbaik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!