Animation xususiyati

animation xususiyati - bu animatsiya uchun qisqartma xususiyat bo'lib, barcha animatsiya xususiyatlarini bir vaqtning o'zida belgilashga imkon beradi: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Qiymatlarning tartibi muhim emas, animatsiyaning ishlash vaqi animation-duration albatta kechikish animation-delay dan oldin turishi kerak. Faqat animation-name va animation-duration xususiyatlari majburiydir.

Xususiyat shuningdek none qiymatini qabul qilishi mumkin, bu animatsiyani butunlay o'chiradi. Bu qiymat standart qiymat hisoblanadi.

Sintaksis

cssselector {
  animation: qiymatlar;
}

Misol

Ushbu misolda animatsiyadan oldin 3 soniya kechikish bo'ladi (har bir yangi ijro etishdan oldin), so'ngra animatsiya 6 soniya davomida ijro etiladi:

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

Результат:

Misol . Mumkin bo'lgan muammolar

Qisqa shaklda yozilgan animatsiya o'z nomi tufayli ishlamasligi mumkin. Keling, quyidagi animatsiyani ko'rib chiqaylik:

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

E'tibor bering, men reverse animatsiya nomidan foydalanmoqdaman. Birinchi qarashda, hamma narsa yaxshi, lekin animatsiya ishlamayapti, chunki reverse - animation-direction xususiyati uchun amal qiluvchi kalit so'z.

Shuningdek, animatsiya nomida boshqa kalit so'zlardan foydalanganda qisqa shaklda ishlamaydi. Lekin "to'liq" shaklda ishlatilganda hamma narsa yaxshi ishlaydi.

animation-direction xususiyatining qiymatlari bo'lgan kalit so'zlar, animatsiyalarni buzadigan, shuningdek silliqlashtirish funksiyalariga tegishli kalit so'zlar, shuningdek infinite, alternate, running, paused va hokazolarni o'z ichiga oladi.

Shuningdek qarang