თვისება animation-direction

თვისება animation-direction აზუსტებს ანიმაციის მიმართულებას. ნაგულისხმევად, ანიმაცია განმეორდება მხოლოდ 1 ჯერ და შემდეგ დაბრუნდება საწყის მდგომარეობაში, შემდეგ კი, თუ მითითებულია დაყოვნება animation-delay, დაელოდება მითითებულ დროს და შემდეგ ციკლი თავიდან დაიწყება.

ეს თვისება საშუალებას აძლევს შეცვალოს ეს ქცევა, მაგალითად, ისე რომ ანიმაცია დასრულების შემდეგ დარჩეს იმ ადგილას, სადაც ის დასრულდა, და არ გადაახტეს საწყის პოზიციაზე.

ასევე შესაძლებელია ასეთი ქცევის მითითება: ანიმაცია მიაღწევს უკიდურეს წერტილს და უკან დაბრუნდება (როგორც transition-ში). იხილეთ აღწერა ქვემოთ.

სინტაქსი

სელექტორი {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

მნიშვნელობები

მნიშვნელობა	აღწერა
`reverse`	ანიმაცია ჩაირთვება საპირისპირო მიმართულებით.
`alternate`	ანიმაცია ჩაირთვება ჯერ პირდაპირი, შემდეგ კი საპირისპირო მიმართულებით (როგორც transition-ში).
`alternate-reverse`	ანიმაცია ჩაირთვება საბოლოო პოზიციიდან საწყისში და უკან. არსებითად, ეს არის `alternate` და `reverse` მნიშვნელობები ერთად.
`normal`	ანიმაცია ჩაირთვება დასაწყისიდან დასასრულამდე, ხოლო დასრულების შემდეგ ნახტომით დაბრუნდება საწყის პოზიციაზე.

ნაგულისხმევი მნიშვნელობა: normal.

მაგალითი

ახლა ელემენტი გადაადგილდება ერთი მიმართულებით, შემდეგ კი უკან დაბრუნდება, რადგან მითითებულია მნიშვნელობა alternate. ამ შემთხვევაში animation-duration მნიშვნელობა არის 3 წამი და ეს ნიშნავს, რომ გადაადგილება "იქ" და "უკან" გაგრძელდება 3 წამი:

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

მაგალითი

ახლა ელემენტი გადაადგილდება საპირისპირო მიმართულებით (უნდა მარცხნიდან მარჯვნივ, ახლა კი მარჯვნიდან მარცხნივ):

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

მაგალითი

ახლა ელემენტი გადაადგილდება უკან და წინ, მაგრამ საპირისპირო მიმართულებით (უნდა დაიწყოს მარცხნიდან, ახლა კი დაიწყებს მარჯვნიდან):

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

იხილეთ ასევე

თვისება animation-name,
რომელიც აზუსტებს ანიმაციის სახელს
თვისება animation-duration,
რომელიც აზუსტებს ანიმაციის ხანგრძლივობას
თვისება animation-delay,
რომელიც აზუსტებს დაყოვნებას ანიმაციის შესრულებამდე
თვისება animation-timing-function,
რომელიც აზუსტებს ანიმაციის შესრულების სიჩქარეს
თვისება animation-iteration-count,
რომელიც აზუსტებს ანიმაციის გამეორებების რაოდენობას
თვისება animation-fill-mode,
რომელიც აზუსტებს ანიმაციის მდგომარეობას
თვისება animation-play-state,
რომელიც საშუალებას აძლევს ანიმაციის პაუზის დაყენებას
თვისება animation,
რომელიც წარმოადგენს შემოკლებას ანიმაციებისთვის
ბრძანება @keyframes,
რომელიც აზუსტებს ანიმაციის საკვანძო კადრებს
გლუვი გადასვლები transition, რომლებიც წარმოადგენენ ანიმაციას ელემენტზე დაჰავერებისას