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
selektor {
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:
<div id="elem"></div>
@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:
@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
-
@keyframesəmrini,
animasiyanın əsas kadrlarını təyin edən -
transitionhamar keçidlər, elementin üzərinə gəldikdə animasiya təmsil edən