Berikut ialah beberapa tajuk gaya soalan yang sesuai dengan kandungan yang anda sediakan: * Gelung Animasi CSS: Bagaimana Memudarkan Teks Masuk dan Keluar Tanpa Had tanpa JavaScript? * Mencipta Gelung Pudar Infinite untuk Teks dalam CS

Gelung Animasi CSS Mudah: Memudar Masuk dan Keluar Teks "Memuatkan"

Soalan

Bagaimana anda mencipta infiniti gelung dalam animasi CSS yang memudar teks masuk dan keluar tanpa menggunakan JavaScript? Walaupun mencuba, isu itu masih tidak dapat diselesaikan:

@keyframes flickerAnimation { /* flame pulses */
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

Jawapan

Untuk memastikan keserasian merentas penyemak imbas, sertakan awalan vendor dalam CSS anda:

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}

Gunakan kod yang dikemas kini dengan HTML berikut:

<div class="animate-flicker">Loading...</div>

Atas ialah kandungan terperinci Berikut ialah beberapa tajuk gaya soalan yang sesuai dengan kandungan yang anda sediakan: * Gelung Animasi CSS: Bagaimana Memudarkan Teks Masuk dan Keluar Tanpa Had tanpa JavaScript? * Mencipta Gelung Pudar Infinite untuk Teks dalam CS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!