Mengapa Imej Latar Belakang CSS3 Saya Tidak Bergerak?

Menghidupkan Imej Latar Belakang dengan CSS3: Panduan Penyelesaian Masalah

Apabila cuba menghidupkan imej latar belakang menggunakan CSS3, anda mungkin menghadapi masalah menghalang tingkah laku yang dijangkakan . Untuk membetulkan masalah ini, mari kita selidiki kod yang disediakan dan kenal pasti kemungkinan salah tanggapan.

Dalam contoh yang anda berikan, animasi nampaknya gagal disebabkan penggunaan bingkai utama CSS yang salah. Sintaks peraturan "@-webkit-keyframes" telah ditamatkan dalam spesifikasi CSS 2020. Untuk menyelesaikan isu ini, anda harus mengemas kini kod anda untuk menggunakan sintaks "@keyframes" standard.

Berikut ialah coretan dikemas kini yang sepatutnya berfungsi seperti yang dimaksudkan:

@keyframes test {
  0% {
    background-image: url('frame-01.png');
  }
  20% {
    background-image: url('frame-02.png');
  }
  40% {
    background-image: url('frame-03.png');
  }
  60% {
    background-image: url('frame-04.png');
  }
  80% {
    background-image: url('frame-05.png');
  }
  100% {
    background-image: url('frame-06.png');
  }
}

div {
  float: left;
  width: 200px;
  height: 200px;
  animation-name: test;
  animation-duration: 10s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-timing-function: linear;
}

Ingat untuk mengemas kini awalan animasi dalam alat pembangun penyemak imbas anda atau fail CSS kepada "@keyframes test" dan bukannya "@-webkit-keyframes ujian."

Dengan pelarasan ini, imej latar belakang anda kini seharusnya bernyawa dengan lancar seperti yang dimaksudkan.

Atas ialah kandungan terperinci Mengapa Imej Latar Belakang CSS3 Saya Tidak Bergerak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!