Ciri animation

Ciri animation ialah ciri singkatan untuk animasi, membolehkan anda menetapkan semua ciri untuk animasi secara serentak: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Susunan nilai tidak penting, masa pelaksanaan animasi animation-duration semestinya diletakkan sebelum kelewatan animation-delay. Hanya ciri animation-name dan animation-duration adalah wajib.

Ciri juga boleh menerima nilai none, yang mematikan animasi sama sekali. Nilai ini ialah nilai lalai.

Sintaks

csspemilih {
  animation: nilai;
}

Contoh

Dalam contoh ini, akan ada kelewatan sebelum animasi selama 3 saat (sebelum setiap mainan baru), dan kemudian animasi akan dimainkan selama 6 saat:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation: move 6s infinite 3s linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Contoh . Masalah yang Mungkin Berlaku

Animasi, yang ditulis dalam bentuk ringkas, mungkin tidak berfungsi kerana namanya. Mari kita pertimbangkan animasi berikut:

css@keyframes reverse {
  from {
    left: 0;
  }
  to {
    left: 300px;
  }
}

Perhatikan, saya menggunakan nama animasi reverse. Pada pandangan pertama, semuanya kelihatan baik, tetapi animasi tidak berfungsi, kerana reverse ialah kata kunci yang sah untuk ciri animation-direction.

Juga, animasi tidak akan berfungsi apabila menggunakan bentuk ringkas dalam nama kata kunci lain. Tetapi semuanya berfungsi dengan baik apabila menggunakan bentuk "penuh" penerangan.

Kata kunci-nilai animation-direction, yang merosakkan animasi, termasuklah kata kunci yang berkaitan dengan fungsi pelicinan, dan juga infinite, alternate, running, paused dan sebagainya.

Lihat juga