თვისება animation

თვისება animation არის შემოკლებული თვისება ანიმაციისთვის, რომელიც საშუალებას გაძლევთ ერთდროულად დააყენოთ ანიმაციის ყველა თვისება: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

მნიშვნელობების თანმიმდევრობას მნიშვნელობა არ აქვს, ანიმაციის შესრულების დრო animation-duration სავალდებულოდ უნდა იყოს დაყენებული დაყოვნებამდე animation-delay. სავალდებულოა მხოლოდ თვისებები animation-name და animation-duration.

თვისებას ასევე შეუძლია მიიღოს მნიშვნელობა none, რომელიც სრულად ართმევს ანიმაციას. ეს მნიშვნელობა არის ნაგულისხმევი მნიშვნელობა.

სინტაქსი

სელექტორი {
	animation: მნიშვნელობები;
}

მაგალითი

ამ მაგალითში, ანიმაციამდე იქნება 3 წამის დაყოვნება (ყოველ ახალ გაშვებამდე), შემდეგ კი ანიმაცია გაეშვება 6 წამის განმავლობაში:

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

მაგალითი . შესაძლო პრობლემები

ანიმაცია, რომელიც ჩაწერილია შემოკლებული ფორმით, შეიძლება არ იმუშაოს თავისი სახელის გამო. განვიხილოთ შემდეგი ანიმაცია:

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

გაითვალისწინეთ, მე ვიყენებ ანიმაციის სახელს reverse. ერთი შეხედვით, ყველაფერი კარგადაა, მაგრამ ანიმაცია არ მუშაობს, რადგან reverse არის სწორი საკვანძო სიტყვა თვისებისთვის animation-direction.

ასევე, ანიმაცია არ იმუშავებს შემოკლებულ ფორმაში გამოყენებისას სახელში სხვა საკვანძო სიტყვების არსებობისას. მაგრამ ყველაფერი კარგად მუშაობს "სრული" ფორმის აღწერის გამოყენებისას.

animation-direction-ის საკვანძო სიტყვა-მნიშვნელობებს შორის, რომლებიც აზიანებენ ანიმაციას, უნდა მივაკუთვნოთ ის საკვანძო სიტყვებიც, რომლებიც ეკუთვნის გლუვების ფუნქციებს, ასევე infinite, alternate, running, paused და ა.შ.

იხილეთ აგრეთვე

ბრძანება @keyframes,
რომელიც ადგენს ანიმაციის საკვანძო კადრებს
გლუვი გადასვლები transition, რომლებიც წარმოადგენენ ანიმაციას ელემენტზე დაჰოვერებისას