@keyframes komandası

@keyframes komandası animasiyanın açar kadrlarını təyin edir. Açar kadr, elementə müəyyən bir zamanda tətbiq olunan, məsələn, mövqe, ölçü, rəng və s. kimi CSS elementimizin müxtəlif xassələrini təmsil edir.

Sintaksis

@keyframes animasiya adı {
	açar kadrlar
}

Nümunə

Açar kadrları təyin edirik:

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

Nümunə

İndi isə kvadratımızı animasiya ilə yuxarıdan aşağıya hərəkət etdirək:

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

Nümunə

Gəlin fiqurumuzun enini animasiya ilə faizlə təyin olunmuş açar nöqtələrindən istifadə edərək artıraq:

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

Nümunə

İndi isə fiqurumuzun şəffaflığını dəyişək:

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

Həmçinin bax

CSS animasiyası üçün bütün xassələr animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, keyframes
transition - hamar keçidlər (elementin üzərinə gəldikdə animasiya)