@keyframes buýrugy

@keyframes buýrugy animasiýanyň gurlap beriji kadrlaryny kesgitleýär. Gurlap beriji kadr, mysal üçin, ýerine ýetirilişi, ölçegi, reňki we ş.m. bolup bileren, belli bir wagt böleginde elemente goşulýan, biziň CSS elementimiziň dürli häsiýetleridir.

Sintaksis

@keyframes animasiýanyň ady {
	gurlap beriji kadrlar
}

Mysal

Gurlap beriji kadrlary kesgitläň:

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

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

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

Mysal

Indi bolsa, kwadratymyzy ýokardan aşak animasiýa bilen hereket etdireliň:

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

@keyframes anim {
	from {
		margin-top: 0%;
	}
	to {
		margin-top: 10%;
	}
}

#elem {
	animation: anim 2s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Mysal

Şekilimiziň inişligini, gurlap beriji nokatlary prosentlerde kesgitlep, animasiýa bilen artdyralyň:

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

@keyframes anim {
	from {
		width: 10%;
	}
	to {
		width: 40%;
	}
}

#elem {
	animation: anim 2s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Mysal

Indi bolsa, şekilimiziň geçirijiligini üýtgeteliň:

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

@keyframes anim {
	from {
		background-color: #467CBC;
	}
	to {
		background-color: #C2DDFD;
	}
}

#elem {
	animation: anim 2s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Şeýle hem garalyň

CSS animasiýasy üçin ähli häsiýetler animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, keyframes
transition – meňzeş geçişler (elementiň üstüne gelende animasiýa)