@KeyFrames digunakan dalam CSS untuk membuat kesan animasi. 1) Tentukan urutan animasi: dengan menyatakan nama dan nilai atribut CSS pada titik masa yang berlainan, seperti @KeyFrames Slidein {0% {Transform: TranslateX (-100%); opacity: 0;} 50% {opacity: 0.5;} 100% {transform: translateX (0); Opacity: 1;}}. 2) Sapukan animasi: Gunakan atribut animasi, seperti .element {animasi: slidein 1s mudah-dalam-keluar;}. 3) Penggunaan lanjutan: mainan terbalik (arah animasi: terbalik;), gelung tak terhingga (animasi-pengiraan-kiraan: tak terhingga;), kelewatan dan jeda (animasi-kelewatan, animasi-play-state: dijeda;), animasi berganda (dipisahkan oleh koma).

Di CSS, peraturan @keyframes adalah alat yang berkuasa untuk mewujudkan kesan animasi. Melaluinya, anda boleh menentukan satu siri gaya yang akan digunakan untuk unsur -unsur dalam masa yang ditentukan, dengan itu mencapai kesan animasi. Ringkasnya, @keyframes membolehkan anda mengawal penampilan elemen pada pelbagai peringkat semasa proses animasi.

Mari kita menyelam ke dalam penggunaan @keyframes dan beberapa petua praktikal.

Pertama, peraturan @keyframes membolehkan anda menentukan urutan animasi. Anda boleh memberikan nama kepada animasi dan kemudian menentukan peratusan mata masa yang berlainan dalam peraturan, setiap titik masa sepadan dengan satu set nilai atribut CSS. Contohnya:

 @KeyFrames Slidein {
  0% {
    Transform: TranslateX (-100%);
    Kelegapan: 0;
  }
  50% {
    Kelegapan: 0.5;
  }
  100% {
    Transform: TranslateX (0);
    Kelegapan: 1;
  }
}

Contoh ini mentakrifkan animasi yang dipanggil slideIn , slaid dari kiri dan secara beransur -ansur meningkatkan ketelusan. Animasi bermula dengan benar -benar telus dan terletak di luar skrin kiri, dengan ketelusan 0.5 apabila ia mencapai 50%, dan akhirnya dipaparkan sepenuhnya di tengah skrin.

Untuk menggunakan animasi ini, anda perlu menggunakan atribut animation pada elemen:

 .element {
  Animasi: Slidein 1s mudah-dalam-keluar;
}

Di sini, 1s bermaksud bahawa animasi berlangsung selama 1 saat, ease-in-out adalah fungsi masa animasi, yang mengawal perubahan kelajuan animasi.

Sekarang, mari kita lihat beberapa penggunaan dan petua yang lebih maju:

1. Reverse Play Animation : Anda boleh menggunakan animation-direction: reverse; Untuk membuat animasi bermain ke belakang, atau animation-direction: alternate; Untuk membuat animasi bermain alternatif antara ke hadapan dan terbalik.

 .element {
  Animasi: Slidein 1s mudah-dalam-keluar;
  Animasi-arah: terbalik;
}

2. Loop Infinite : Melalui animation-iteration-count: infinite; , Anda boleh membuat animasi bermain tak terhingga.

 .element {
  Animasi: Slidein 1s mudah-dalam-keluar tak terhingga;
}

3. Kelewatan dan Jeda : Anda boleh menggunakan animation-delay untuk melambatkan permulaan animasi, atau animation-play-state: paused; untuk menjeda animasi.

 .element {
  Animasi: Slidein 1s mudah-dalam-keluar;
  Animasi-Delay: 2s;
}

.element: hover {
  Animasi-bermain-Negeri: Jeda;
}

4. Animasi Pelbagai : Anda boleh memohon pelbagai animasi ke elemen yang sama, hanya memisahkan nama animasi dan parameter yang berbeza dengan koma dalam atribut animation .

 .element {
  Animasi: Slidein 1s mudah-dalam-keluar, Fadein 0.5s mudah keluar;
}

Terdapat beberapa kesalahpahaman yang biasa dan tip debugging yang perlu diperhatikan semasa menggunakan @keyframes :

• Keserasian Pelayar : Walaupun pelayar moden sudah mempunyai sokongan yang sangat baik untuk @keyframes , masih penting untuk diperhatikan bahawa beberapa pelayar yang lebih tua mungkin memerlukan awalan (seperti -webkit- ). Menggunakan alat automasi seperti AutoPrefixer boleh membantu menyelesaikan masalah ini.

• Pengoptimuman Prestasi : Animasi boleh menjejaskan prestasi halaman, terutamanya apabila animasi melibatkan sejumlah besar elemen atau transformasi kompleks. Cuba gunakan sifat transform dan opacity , kerana ia biasanya dikendalikan oleh pecutan GPU dan melakukan lebih baik.

• Tips Debugging : Apabila debugging animasi, anda boleh menggunakan alat pemaju penyemak imbas untuk melihat garis masa animasi untuk membantu anda memahami pelaksanaan animasi. Jika kesan animasi tidak memenuhi jangkaan, periksa sama ada harta animation-fill-mode ditetapkan dengan betul, yang menentukan status animasi pada permulaan dan akhir animasi.

Akhirnya, kongsi beberapa pengalaman dan cadangan peribadi saya:

• Pastikan ia mudah : Walaupun @keyframes menyediakan keupayaan animasi yang kuat, kadang -kadang kesederhanaan adalah kecantikan. Cuba untuk mengelakkan animasi yang terlalu kompleks, kerana mereka bukan sahaja sukar untuk dikekalkan, tetapi juga boleh menjejaskan pengalaman pengguna.

• Pengalaman Pengguna : Animasi harus meningkatkan pengalaman pengguna, tidak mengganggu dengannya. Pastikan animasi anda masuk akal dan jangan membuat pengguna keliru atau tidak sabar.

• Ujian dan lelaran : Kesan animasi boleh dilakukan secara berbeza pada peranti dan pelayar yang berbeza. Uji lebih banyak dan berulang lagi untuk memastikan bahawa animasi anda berfungsi secara normal dalam pelbagai persekitaran.

Dengan @keyframes , anda boleh menambah kesan animasi yang jelas ke laman web anda untuk meningkatkan pengalaman pengguna. Mudah -mudahan pandangan dan tip ini akan membantu anda pergi lebih jauh di jalan animasi CSS.

Atas ialah kandungan terperinci CSS: Apa yang boleh saya lakukan dengan @KeyFrames?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!