Animation häsiýeti

animation häsiýeti - bu animasiýa üçin gysga ýazgy häsiýet, animasiýa üçin ähli häsiýetleri bir wagtda belläp bermäge mümkinçilik berýär: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Görnüş bahalarynyň tertibi aýratynlyk döredýänok, animasiýanyň işleýän wagty animation-duration hökmandan animation-delay gijä galdyrmasydan öň durmaly. Diňe animation-name we animation-duration häsiýetleri hökman.

Häsiýet şeýle hem none bahasyny kabul edip biler, ýagny animasiýany doly ýapýar. Bu baha bellenen ýaly bahadyr.

Sintaksis

selektor {
	animation: bahalar;
}

Mysal

Bu mysalda animasiýadan öň (her täze oýnama öň) 3 sekunt gijä galdyrylar, soňra animasiýa 6 sekunt dowamynda oýnalar:

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

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

#elem {
	animation: hereket 6s infinite 3s linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Mysal . Mümkin bolan kynçylyklar

Gysga görnüşde ýazylyş animasiýa öz ady sebäpli işlemese mümkin. Aşakdaky animasiýany gözden geçireýli:

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

Üns beriň, men reverse animasiýa adyny ulanýaryn. Ilkinji syn-da, hemmesi gowy, ýöne animasiýa işlemeýär, sebäbi reverse animation-direction häsiýeti üçin dogry söz açar bahadyr.

Şeýle hem animasiýa gysga görnüşde beýleki söz açar sözleri adynda ulananda işlemez. Ýöne "doly" görnüşde düşündiriş ulananda hemmesi gowy işleýär.

animation-direction häsiýetiniň ýaramaz animasiýalar edýän söz açar bahalaryna degişli sözleri, şeýle hem infinite, alternate, running, paused we ş.m. goşmaly.

Şeýle-de görüň

@keyframes buýrugy,
animasiýanyň açar kadrlaryny belläp berýär
transition üýtgeşme, elementiň üstüne getirilende animasiýany görkezýär