Mengapa Animasi Spin CSS3 Saya Tidak Berfungsi?

Animasi Putaran CSS3

Anda telah melaksanakan gaya animasi dengan betul, tetapi animasi anda tidak berfungsi kerana anda belum menentukan kerangka utama untuk animasi.

Animasi CSS3 memerlukan bingkai utama untuk mentakrifkan keadaan mula dan tamat animasi.

Untuk menyelesaikan isu ini, tambahkan bingkai utama pada kod CSS anda. Ini akan menentukan bagaimana elemen anda akan berubah semasa animasi. Berikut ialah contoh cara untuk melakukannya:

<code class="css">@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}</code>

Ini mentakrifkan kerangka utama yang memulakan animasi pada 0 darjah dan menamatkannya pada 360 darjah. Anda boleh menyesuaikan nilai ini untuk mencipta kesan animasi yang diingini.

Berikut ialah demo untuk menggambarkan penyelesaian:

<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>

Dengan perubahan ini, elemen anda kini harus berputar secara berterusan. Ingat, untuk animasi CSS3 berfungsi, anda perlu menentukan kedua-dua gaya animasi dan bingkai utama animasi.

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