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

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

Ejemplo

Definiendo fotogramas clave:

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

css@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:

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

css@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:

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

css@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:

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

css@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