La regla @keyframes

La regla @keyframes define los fotogramas clave de una animación. Un fotograma clave representa diferentes propiedades de nuestro elemento CSS, por ejemplo, posición, tamaño, color, etc., que se aplican al elemento en un momento específico en el tiempo.

Sintaxis

@keyframes nombre-de-la-animación {
	fotogramas clave
}

Ejemplo

Definiendo fotogramas clave:

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

Ejemplo

Y ahora movamos nuestro cuadrado de arriba a abajo usando animación:

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

Ejemplo

Aumentemos el ancho de nuestra figura usando animación, definiendo puntos clave en porcentajes:

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

Ejemplo

Y ahora cambiemos la opacidad de nuestra 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;
}

Véase también

todas las propiedades para animación CSS animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, keyframes
transition - transiciones suaves (animación al pasar el cursor sobre el elemento)