@KeyFrames popular kerana fleksibiliti dan kuasa dalam mewujudkan animasi CSS yang lancar. Trik utama termasuk: 1) Menentukan peralihan yang lancar di antara negeri-negeri, 2) menghidupkan pelbagai sifat serentak, 3) menggunakan awalan vendor untuk keserasian pelayar, 4) menggabungkan dengan JavaScript untuk interaktiviti, dan 5) mengoptimumkan prestasi dengan harta perubahan.

Apabila ia datang kepada animasi CSS, peraturan @keyframes adalah kuasa besar, membolehkan pemaju untuk mewujudkan kesan lancar dan dinamik yang benar -benar dapat meningkatkan pengalaman pengguna laman web. Tetapi apa yang menjadikan @keyframes begitu popular, dan apakah helah yang paling banyak digunakan yang pemaju bergantung untuk membuat animasi yang menakjubkan?

Mari kita menyelam ke dunia @keyframes dan mendedahkan keajaiban di belakang beberapa teknik yang paling berkesan.

Animasi CSS telah menjadi ruji dalam reka bentuk web moden, dan @keyframes berada di tengah -tengahnya semua. Peraturan ini membolehkan kita menentukan langkah -langkah pertengahan urutan animasi, memberikan kita kawalan yang tepat mengenai bagaimana peralihan elemen dari satu negeri ke negara lain. Keindahan @keyframes terletak pada kesederhanaan dan kuasa, menjadikannya alat untuk mewujudkan antara muka pengguna yang menarik.

Salah satu sebab @keyframes digunakan secara meluas adalah fleksibiliti. Sama ada anda menghidupkan kesan hover butang mudah atau membuat animasi pelbagai peringkat kompleks, @keyframes boleh mengendalikan semuanya. Tetapi untuk benar -benar memanfaatkan potensinya, anda perlu mengetahui helah yang menggunakan pemaju yang digunakan untuk memanfaatkan ciri -ciri yang kuat ini.

Mari kita mulakan dengan asas -asas. @keyframes membolehkan anda menentukan satu set kerangka utama yang menggambarkan keadaan elemen pada titik tertentu dalam masa semasa animasi. Berikut adalah contoh mudah bagaimana anda boleh menggunakan @keyframes untuk membuat kesan berdenyut:

 @KeyFrames Pulse {
  0% {
    Transform: Skala (1);
  }
  50% {
    Transform: Skala (1.1);
  }
  100% {
    Transform: Skala (1);
  }
}

.pulsing-element {
  Animasi: Pulse 2S Infinite;
}

Kod ini mentakrifkan animasi pulse yang menanam elemen sehingga 1.1 kali saiz asalnya dan kembali lagi, mewujudkan kesan berdenyut yang lancar. Harta animation pada kelas .pulsing-element .

Sekarang, mari kita meneroka beberapa helah yang paling banyak digunakan dengan @keyframes yang boleh mengambil animasi anda ke peringkat seterusnya.

Salah satu aspek yang paling kuat dari @keyframes adalah keupayaan untuk mewujudkan peralihan yang lancar antara negeri -negeri yang berbeza. Dengan berhati -hati menentukan kerangka utama, anda boleh membuat animasi yang merasakan semula jadi dan cecair. Sebagai contoh, pertimbangkan contoh pemutar pemuatan:

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

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

Animasi ini mewujudkan kesan berputar yang lancar dengan memutar elemen 360 darjah selama 1 saat. Fungsi masa linear memastikan bahawa kelajuan putaran tetap berterusan sepanjang animasi, mewujudkan gelung lancar.

Satu lagi helah ialah menggunakan @keyframes untuk mewujudkan animasi kompleks yang melibatkan pelbagai sifat. Sebagai contoh, anda mungkin mahu menghidupkan kedua-dua kedudukan dan kelegapan elemen untuk membuat kesan pudar:

 @KeyFrames Fadeinslide {
  0% {
    Kelegapan: 0;
    Transform: Translate (20px);
  }
  100% {
    Kelegapan: 1;
    Transform: Translate (0);
  }
}

.fade-in-element {
  Animasi: Fadeinslide 0.5s mudah keluar;
}

Animasi ini bermula dengan elemen yang tidak kelihatan dan sedikit mengimbangi secara menegak. Apabila animasi berlangsung, elemen memudar dan meluncur ke dalam pandangan, mewujudkan kesan yang lancar dan menarik.

Salah satu cabaran dengan animasi @keyframes adalah memastikan mereka bekerja dengan baik di seluruh pelayar yang berbeza. Trik biasa adalah menggunakan awalan vendor untuk memastikan keserasian:

 @keyframes fadein {
  0% {
    Kelegapan: 0;
  }
  100% {
    Kelegapan: 1;
  }
}

@-Webkit-Keyframes Fadein {
  0% {
    Kelegapan: 0;
  }
  100% {
    Kelegapan: 1;
  }
}

@-Moz-Keyframes Fadein {
  0% {
    Kelegapan: 0;
  }
  100% {
    Kelegapan: 1;
  }
}

.fade-in-element {
  Animasi: Fadein 0.5s mudah keluar;
  -Webkit-Animation: Fadein 0.5s mudah keluar;
  -Moz-Animation: Fadein 0.5s mudah keluar;
}

Dengan memasukkan awalan vendor ini, anda memastikan bahawa animasi anda berfungsi dengan lancar dalam versi lama pelayar seperti Safari dan Firefox.

Satu lagi helah lanjutan adalah menggunakan @keyframes dalam kombinasi dengan JavaScript untuk membuat animasi interaktif. Sebagai contoh, anda mungkin mahu mencetuskan animasi apabila pengguna melayang ke atas elemen:

 @KeyFrames Hovereffect {
  0% {
    Transform: Skala (1);
  }
  50% {
    Transform: Skala (1.1);
  }
  100% {
    Transform: Skala (1);
  }
}

.Hover-element {
  Peralihan: Transformasi 0.3s mudah;
}

.Hover-Element: Hover {
  Animasi: Hovereffect 0.5s mudah;
}

CSS ini mencipta kesan hover yang menanam elemen sedikit apabila pengguna melayang di atasnya. Harta transition memastikan peralihan yang lancar kembali ke keadaan asal apabila pengguna bergerak kursor mereka.

Apabila bekerja dengan @keyframes , penting untuk mempertimbangkan prestasi. Satu helah untuk mengoptimumkan animasi adalah dengan menggunakan harta will-change untuk memaklumkan penyemak imbas perubahan yang akan datang:

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

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

Dengan menetapkan will-change: transform , anda memberitahu penyemak imbas untuk mempersiapkan perubahan kepada harta mengubah unsur, yang dapat membantu meningkatkan prestasi animasi.

Walau bagaimanapun, perlu diperhatikan bahawa will-change yang berlebihan boleh mempunyai kesan prestasi negatif, jadi gunakannya dengan bijak.

Satu lagi perangkap biasa dengan @keyframes adalah mencipta animasi yang terlalu panjang atau terlalu lambat, yang boleh membawa kepada pengalaman pengguna yang lemah. Peraturan yang baik adalah untuk memastikan animasi pendek dan tajam, biasanya di bawah 1 saat untuk kebanyakan interaksi UI.

Kesimpulannya, @keyframes adalah alat yang sangat kuat untuk mewujudkan animasi yang dinamik dan menarik dalam CSS. Dengan menguasai helah dan teknik yang digariskan di sini, anda boleh membuat animasi yang lancar, berpengalaman, dan menarik yang meningkatkan pengalaman pengguna laman web anda. Sama ada anda menghidupkan kesan hover mudah atau peralihan pelbagai peringkat kompleks, @keyframes memberi anda fleksibiliti dan kawalan untuk membawa reka bentuk anda ke kehidupan.

Atas ialah kandungan terperinci @KeyFrames CSS: Trik yang paling banyak digunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!