Animasi Putaran CSS3 Tidak Berfungsi: Mengapa Bingkai Utama Saya Hilang?

Animasi Putaran CSS3: Mengapa Ia Tidak Berfungsi

Anda telah menghadapi isu di mana animasi putaran CSS3 tidak berfungsi dalam kod anda. Sebelum menyelesaikan masalah, adalah penting untuk memahami prinsip asas di sebalik animasi CSS3.

Menggunakan Kerangka Kunci Animasi CSS3

Untuk memanfaatkan kuasa Animasi CSS3, mentakrifkan bingkai kunci animasi adalah penting. . Kerangka kunci menentukan cara elemen animasi harus muncul pada selang masa yang berbeza sepanjang animasi. Dalam kod anda, anda telah merujuk animasi bernama "spin", tetapi kerangka utama ini belum ditakrifkan.

Rujuk panduan rasmi pembangun Mozilla (https://developer.mozilla.org/en- AS/docs/CSS/Tutorials/Using_CSS_animations) untuk mendapatkan maklumat terperinci tentang kerangka utama animasi CSS.

Pelaksanaan

Berikut ialah coretan dengan bingkai utama yang ditambahkan untuk menunjukkan cara animasi putaran boleh dilaksanakan dengan berkesan:

HTML:

<code class="html"><div></div></code>

CSS:

<code class="css">div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}</code>

Dalam kod ini, kami mentakrifkan kerangka utama animasi "spin" menggunakan "dari" dan pemilih "kepada". Ini menentukan bahawa elemen akan bermula pada putaran 0 darjah dan berputar secara beransur-ansur kepada 360 darjah sepanjang tempoh animasi.

Dengan memasukkan definisi bingkai utama ini, anda akan membolehkan animasi putaran berfungsi seperti yang dimaksudkan dalam kod anda .

Atas ialah kandungan terperinci Animasi Putaran CSS3 Tidak Berfungsi: Mengapa Bingkai Utama Saya Hilang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!