Xüsusiyyət animation-direction

Xüsusiyyət animation-direction animasiyanın istiqamətini təyin edir. Standart olaraq animasiya yenidən ancaq 1 dəfə təkrarlanır və sonra ilkin vəziyyətinə qayıdır, sonra, əgər gecikmə təyin edilibsə animation-delay, müəyyən edilmiş vaxtı gözləyir və sonra dövr yenidən başlayır.

Bu xüsusiyyət bu davranışı dəyişməyə imkan verir, məsələn, elə ki, animasiya bitdikdən sonra bitdiyi yerdə qalsın, ilkin vəziyyətinə tullanmasın.

Həmçinin belə bir davranış təyin etmək olar: animasiya son nöqtəyə çatır və geri qayıdır (transition-da olduğu kimi). Aşağıdakı təsvirə baxın.

Sintaksis

selektor {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Dəyərlər

Dəyər	Təsvir
`reverse`	Animasiya əks istiqamətdə oynanılacaq.
`alternate`	Animasiya əvvəlcə düz, sonra isə əks istiqamətdə oynanılacaq (transition kimi).
`alternate-reverse`	Animasiya son vəziyyətdən ilkinə və əksinə oynanılacaq. Əslində bu `alternate` və `reverse` dəyərlərinin birləşməsidir.
`normal`	Animasiya başlanğıcdan sona kimi oynanılacaq, bitdikdən sonra isə tullanıb ilkin vəziyyətinə qayıdacaq.

Standart dəyər: normal.

Nümunə

İndi element bir istiqamətdə hərəkət edəcək, sonra isə geri qayıdacaq, çünki alternate dəyəri təyin edilib. Bununla animation-duration 3 saniyə dəyərinə malikdir və bu o deməkdir ki, "ora" və "geri" hərəkətləri 3 saniyə davam edəcək:

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

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

#elem {
	animation-direction: alternate;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Nümunə

İndi element əks istiqamətdə hərəkət edəcək (soldan sağa yox, sağdan sola):

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

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}
			
#elem {
	animation-direction: reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Nümunə

İndi element irəli-geri hərəkət edəcək, lakin əks istiqamətdə (soldan başlamalı idi, sağdan başlayacaq):

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

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

#elem {
	animation-direction: alternate-reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Həmçinin bax

xüsusiyyət animation-name,
animasiyanın adını təyin edir
xüsusiyyət animation-duration,
animasiyanın müddətini təyin edir
xüsusiyyət animation-delay,
animasiyadan əvvəl gecikməni təyin edir
xüsusiyyət animation-timing-function,
animasiyanın yerinə yetirilmə sürətini təyin edir
xüsusiyyət animation-iteration-count,
animasiyanın təkrarlanma sayını təyin edir
xüsusiyyət animation-fill-mode,
animasiyanın vəziyyətini təyin edir
xüsusiyyət animation-play-state,
animasiyanı fasiləyə qoymağa imkan verir
xüsusiyyət animation,
animasiyalar üçün qısa yazılış təmsil edir
əmri @keyframes,
animasiyanın əsas kadrlarını təyin edir
hamar keçidlər transition, elementin üzərinə gəldikdə işləən animasiyanı təmsil edir