Regula @keyframes

Regula @keyframes definește cadrele cheie ale animației. Un cadru cheie reprezintă diferite proprietăți ale elementului nostru CSS, de exemplu, poziția, dimensiunea, culoarea etc., care sunt aplicate elementului la un moment specificat.

Sintaxă

@keyframes numele-animației {
	cadrele-cheie
}

Exemplu

Definim cadrele cheie:

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

Exemplu

Acum să mutăm pătratul nostru cu ajutorul animației de sus în jos:

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

Exemplu

Să creștem lățimea formei noastre cu ajutorul animației, definind punctele cheie în procente:

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

Exemplu

Acum să schimbăm transparența formei noastre:

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

Vezi și

toate proprietățile pentru animația CSS animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, keyframes
transition - tranziții line (animație la hover pe element)