Animation xassəsi

animation xassəsi - animasiya üçün qısa yazılış xassəsidir, animasiya üçün bütün xassələri eyni zamanda təyin etməyə imkan verir: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Dəyərlərin sırasının əhəmiyyəti yoxdur, animasiyanın icra müddəti animation-duration mütləq olaraq gecikmədən animation-delay əvvəl olmalıdır. Yalnız animation-name və animation-duration xassələri məcburidir.

Xassə həmçinin none dəyərini qəbul edə bilər, bu animasiyanı tamamilə söndürür. Bu dəyər standart dəyərdir.

Sintaksis

cssselektor {
  animation: dəyərlər;
}

Nümunə

Bu nümunədə animasiyadan əvvəl 3 saniyə gecikmə olacaq (hər yeni oxuduqdan sonra), və sonra animasiya 6 saniyə ərzində oxunacaq:

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

Результат:

Nümunə . Mümkün problemlər

Qısa formada yazılmış animasiya öz adı səbəbindən işləməyə bilər. Gəlin aşağıdakı animasiyanı nəzərdən keçirək:

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

Diqqət edin, mən animasiyanın adı kimi reverse istifadə edirəm. İlk baxışdan hər şey yaxşıdır, amma animasiya işləmir, çünki reverse - animation-direction xassəsi üçün etibarlı açar sözdür.

Həmçinin animasiya qısa formada istifadə edilərkən digər açar sözlərin adlarında işləməyəcək. Amma "tam" forma təsviri istifadə edilərkən hər şey yaxşı işləyir.

animation-direction xassəsinin dəyər açar sözlərinə, animasiyaları pozanlara, həmçinin hamarlama funksiyalarına aid olan açar sözlər, eləcə də infinite, alternate, running, paused və s. aiddir.

Həmçinin bax