თვისება animation-fill-mode

თვისება animation-fill-mode ადგენს, რომელ პოზიციაზე უნდა გაჩერდეს ანიმაცია დასრულების შემდეგ. ნაგულისხმევად, ანიმაცია ბრუნდება თავდაპირველ მნიშვნელობაზე და ეს შეიძლება გამოიყურებოდეს არა ძალიან ლამაზად.

სინტაქსი

სელექტორი {
	animation-fill-mode: backwards | forwards | both | none;
}

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

მნიშვნელობა	აღწერა
`none`	თუ დაყენებულია ანიმაციის დაგვიანება - მაშინ დაგვიანების დროის განმავლობაში ელემენტი დარჩება ადგილზე, შემდეგ კი ნახტომით გადავა `0%` კადრზე. ანიმაციის დასრულების შემდეგ ელემენტი არ დარჩება იმ მდგომარეობაში, სადაც გაჩერდა, არამედ ნახტომით გადავა საწყის მდგომარეობაში.
`backwards`	აიძულებს ელემენტს გადაადგილდეს გვერდის ჩატვირთვის შემდეგ `0%` კადრისკენ, მაშინაც კი, თუ დაყენებულია დაგვიანება `animation-delay`, და დარჩეს იქ, სანამ არ დაიწყება ანიმაცია. ანიმაციის დასრულების შემდეგ ელემენტი არ დარჩება იმ მდგომარეობაში, სადაც გაჩერდა, არამედ ნახტომით გადავა საწყის მდგომარეობაში.
`forwards`	მიუთითებს ბრაუზერს, რომ ანიმაციის დასრულების შემდეგ ელემენტი დარჩება იმ მდგომარეობაში, სადაც გაჩერდა.
`both`	მოიცავს backwards-ს და forwards-ს - გვერდის ჩატვირთვის შემდეგ ელემენტი დაიყენებს `0%` კადრზე, ხოლო ანიმაციის დასრულების შემდეგ ელემენტი დარჩება იქ, სადაც გაჩერდა.

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

მაგალითი . მნიშვნელობა none

ამ მაგალითში margin-left დაყენებულია მნიშვნელობაზე 300px ელემენტისთვის, ხოლო ანიმაციის პირველი კადრისთვის - 0px-ზე. რადგან არ არის დაგვიანება animation-delay, ელემენტი გვერდის ჩატვირთვის შემდეგ გახდება 0px-ზე, და არა 300px-ზე. გარდა ამისა, ანიმაცია დასრულების შემდეგ ნახტომით გადავა საწყის მნიშვნელობაზე:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

მაგალითი . მნიშვნელობა none

ამ მაგალითში margin-left დაყენებულია მნიშვნელობაზე 300px ელემენტისთვის, ხოლო ანიმაციის პირველი კადრისთვის - 0px-ზე. ასევე ელემენტისთვის დაყენებულია დაგვიანება animation-delay 3 წამზე, ამიტომ ელემენტი გვერდის ჩატვირთვის შემდეგ გახდება 300px-ზე, და არა 0px-ზე, და იქ დარჩება 3 წამის განმავლობაში ანიმაციის დაწყების შემდეგ, შემდეგ კი ნახტომით გადავა 0px-ზე - და ანიმაცია იქიდან დაიწყება. გარდა ამისა, ანიმაცია დასრულების შემდეგ ნახტომით გადავა საწყის მნიშვნელობაზე:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

მაგალითი . მნიშვნელობა backwards

ამ მაგალითში margin-left დაყენებულია მნიშვნელობაზე 300px ელემენტისთვის, ხოლო ანიმაციის პირველი კადრისთვის - 0px-ზე. ასევე ელემენტისთვის დაყენებულია animation-fill-mode მნიშვნელობაზე backwards, ამიტომ ელემენტი გვერდის ჩატვირთვის შემდეგ გახდება 0px-ზე, და არა 300px-ზე, როგორც ეს იყო animation-fill-mode-ისთვის მნიშვნელობაზე none. გარდა ამისა, ანიმაცია დასრულების შემდეგ ნახტომით გადავა საწყის მნიშვნელობაზე:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: backwards;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

მაგალითი . მნიშვნელობა none და გამეორებების რაოდენობა უდრის 1-ს

ამ მაგალითში margin-left დაყენებულია მნიშვნელობაზე 300px ელემენტისთვის, ხოლო ანიმაციის პირველი კადრისთვის - 0px-ზე. ასევე ელემენტისთვის დაყენებულია დაგვიანება animation-delay 3 წამზე, ამიტომ ელემენტი გვერდის ჩატვირთვის შემდეგ გახდება 300px-ზე, და არა 0px-ზე, და იქ დარჩება 3 წამის განმავლობაში ანიმაციის დაწყების შემდეგ, შემდეგ კი ნახტომით გადავა 0px-ზე - და ანიმაცია იქიდან დაიწყება. რადგან animation-fill-mode დაყენებულია მნიშვნელობაზე none, ანიმაციის გაშვების შემდეგ ელემენტი დაბრუნდება საწყის მნიშვნელობაზე:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

მაგალითი . მნიშვნელობა forwards და გამეორებების რაოდენობა უდრის 1-ს

ამ მაგალითში animation-fill-mode დაყენებულია მნიშვნელობაზე forwards, ხოლო ანიმაციის გამეორებების რაოდენობა - 1-ზე. ანიმაციის გაშვების შემდეგ ელემენტი დარჩება იმ პოზიციაზე, სადაც დასრულდა ანიმაცია, და არ ნახტომით გადავა საწყის წერტილში.

გარდა ამისა, margin-left დაყენებულია მნიშვნელობაზე 300px ელემენტისთვის, ხოლო ანიმაციის პირველი კადრისთვის - 0px-ზე. ასევე ელემენტისთვის დაყენებულია დაგვიანება animation-delay 3 წამზე, ამიტომ ელემენტი გვერდის ჩატვირთვის შემდეგ გახდება 300px-ზე, და არა 0px-ზე, და იქ დარჩება 3 წამის განმავლობაში ანიმაციის დაწყების შემდეგ, შემდეგ კი ნახტომით გადავა 0px-ზე - და ანიმაცია იქიდან დაიწყება:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

მაგალითი . მნიშვნელობა both და გამეორებების რაოდენობა უდრის 1-ს

ამ მაგალითში animation-fill-mode დაყენებულია მნიშვნელობაზე both, ხოლო ანიმაციის გამეორებების რაოდენობა - 1-ზე. გვერდის ჩატვირთვის შემდეგ ელემენტი იდგება ანიმაციის პირველ კადრზე (0px-ზე, და არა 300px-ზე), ხოლო ანიმაციის გაშვების შემდეგ ელემენტი დარჩება იმ პოზიციაზე, სადაც დასრულდა ანიმაცია, და არ ნახტომით გადავა საწყის წერტილში:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: both;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	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-direction,
რომელიც ადგენს ანიმაციის მიმართულებას
თვისება animation-play-state,
რომელიც საშუალებას აძლევს ანიმაცია დააპაუზოს
თვისება animation,
რომელიც წარმოადგენს შემოკლებას ანიმაციებისთვის
ბრძანება @keyframes,
რომელიც ადგენს ანიმაციის საკვანძო კადრებს
ნაკადი გადასვლები transition, რომელიც წარმოადგენს ანიმაციას ელემენტზე დაჰავერებისას