Regola @keyframes

La regola @keyframes definisce i fotogrammi chiave dell'animazione. Un fotogramma chiave rappresenta le diverse proprietà del nostro elemento CSS, ad esempio la posizione, le dimensioni, il colore, ecc., che vengono applicate all'elemento in un momento specifico.

Sintassi

@keyframes nome-animazione {
	fotogrammi-chiave
}

Esempio

Definiamo i fotogrammi chiave:

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

Esempio

Ora spostiamo il nostro quadrato dall'alto verso il basso utilizzando un'animazione:

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

Esempio

Aumentiamo la larghezza della nostra figura utilizzando un'animazione, impostando i punti chiave in percentuale:

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

Esempio

Ora modifichiamo la trasparenza della nostra figura:

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

Vedi anche

tutte le proprietà per le animazioni CSS animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, keyframes
transition - transizioni fluide (animazione al passaggio del mouse sull'elemento)