Properti animation

Properti animation adalah properti singkatan untuk animasi, memungkinkan untuk mengatur semua properti untuk animasi secara bersamaan: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Urutan nilai tidak penting, waktu eksekusi animasi animation-duration harus berada sebelum penundaan animation-delay. Hanya properti animation-name dan animation-duration yang wajib.

Properti juga dapat menerima nilai none, yang menonaktifkan animasi sama sekali. Nilai ini adalah nilai default.

Sintaksis

cssselector {
  animation: nilai;
}

Contoh

Dalam contoh ini, akan ada penundaan selama 3 detik sebelum animasi (sebelum setiap pemutaran baru), dan kemudian animasi akan diputar selama 6 detik:

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 Terjadi

Animasi yang ditulis dalam bentuk singkat mungkin tidak bekerja karena namanya. Mari kita perhatikan animasi berikut:

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

Perhatikan, saya menggunakan nama animasi reverse. Sekilas, semuanya baik-baik saja, tetapi animasi tidak bekerja, karena reverse adalah kata kunci yang valid untuk properti animation-direction.

Animasi juga tidak akan bekerja jika menggunakan kata kunci lain dalam nama saat menggunakan bentuk singkat. Tapi semuanya bekerja baik saat menggunakan bentuk deskripsi "lengkap".

Kata kunci-nilai animation-direction yang dapat merusak animasi, termasuk juga kata kunci yang terkait dengan fungsi pelancaran (timing functions), serta infinite, alternate, running, paused dan sebagainya.

Lihat juga