W3docs
es
Iniciar sesión

Regla CSS @keyframes

La regla @keyframes especifica el código de animación. La animación se crea cambiando gradualmente de un conjunto de estilos CSS a otro.

La at-rule @keyframes es la base de las animaciones de keyframes que se utilizan para animar (cambiar gradualmente de un estilo a otro) muchas propiedades CSS. Esta regla permite especificar qué debe suceder en momentos concretos durante la animación, definiendo estilos para los keyframes (o puntos de paso) a lo largo de la secuencia de animación.

La regla @keyframes forma parte central de la especificación de Animaciones CSS.

La regla @keyframes y su identificador van seguidos de conjuntos de reglas (es decir, reglas de estilo con selectores y bloques de declaración, como en el código CSS normal) delimitados por llaves.

Keyframes en la secuencia de animación

Dentro de las llaves, los selectores de keyframe definen cuándo deben cambiar los estilos durante la secuencia de animación. El conjunto de estilos CSS puede actualizarse múltiples veces a lo largo de la animación.

Selector de keyframe

El bloque de declaración de keyframe incluye propiedades CSS y sus valores. Un selector de keyframe puede usar un porcentaje (%) o las palabras clave from (equivalente a 0%) y to (equivalente a 100%). El 0% marca el inicio de la animación y el 100% marca el final.

No estás limitado a dos keyframes. Agregar selectores intermedios como 25% o 75% te permite controlar la animación en tantos puntos como necesites:

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

También puedes agrupar selectores que compartan los mismos estilos, separándolos con comas: 0%, 100% { opacity: 1; }.

Cómo el navegador rellena los huecos

Solo declaras estilos en los puntos de paso de los keyframes: el navegador interpola cada fotograma intermedio. Si animas background-color de verde en 0% a azul en 50%, los colores se mezclan suavemente a lo largo de ese intervalo; nunca tienes que especificar los valores intermedios tú mismo.

Algunas reglas rigen este proceso de interpolación intermedia:

  • Solo las propiedades animables se interpolan. Los valores numéricos y de color (como width, opacity, transform y color) se animan de forma fluida. Las propiedades como display saltan instantáneamente entre keyframes en lugar de hacer una transición suave.
  • El ritmo se controla por separado. La forma de la curva de interpolación (linear, ease, ease-in-out, etc.) proviene de animation-timing-function, no de @keyframes.
  • Los from/to omitidos se infieren. Si omites el keyframe 0% o 100%, el navegador usa el valor calculado existente del elemento para esa propiedad como punto final faltante.

Prefijos de proveedor

La regla @keyframes está totalmente soportada por todos los navegadores modernos sin necesidad de prefijos de proveedor. Los prefijos heredados (como -webkit- o -moz-) ya no son necesarios.

Sintaxis

Sintaxis de la at-rule CSS @keyframes

@keyframes animationname {keyframes-selector {css-styles;}}

Uso de @keyframes como palabra clave

La regla @keyframes se compone de la palabra clave @keyframes seguida de un identificador (elegido por el desarrollador) que define la animación. Para vincular la animación a un elemento, este identificador se usa como valor de la propiedad animation-name.

Así es como se ve:

Cómo definir una animación y aplicarla a un elemento

/* define the animation */
@keyframes your-animation-name {
  /* style rules */
}

/* apply it to an element */
.element {
  animation-name: your-animation-name;
  /* OR using the animation shorthand property */
  animation: your-animation-name 1s …;
}

Ejemplo de la regla @keyframes con la propiedad background-color:

Ejemplo de la at-rule CSS @keyframes

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        padding: 50px;
        animation: backgrounds 4s infinite;
      }
      @keyframes backgrounds {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #cccccc;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes example</h2>
    <div class="element">The background of this text is animated.</div>
  </body>
</html>
Pruébalo tú mismo »

En este ejemplo, animamos la propiedad background-color. Primero, establecemos un identificador para la animación: backgrounds. Luego definimos los selectores de keyframe (0%, 50% y 100%) y establecemos valores para la propiedad: verde, azul y gris. Esto significa que en el punto de inicio (0%), el color de fondo será verde claro hasta que alcance el siguiente keyframe (50%). En el punto medio de la secuencia de animación, el fondo pasará a azul claro, y en el punto final (100%), será gris.

Ejemplo de la regla @keyframes:

Ejemplo de la at-rule CSS @keyframes con valor infinite

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 10px;
        height: 100px;
        background: red;
        border-radius: 50%;
        position: relative;
        animation: element 4s infinite;
      }
      @keyframes element {
        0% {
          top: 0px;
          background: #1c87c9;
          width: 100px;
        }
        100% {
          top: 200px;
          background: #8ebf42;
          width: 150px;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes rule example</h2>
    <div></div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo del uso de la regla @keyframes para crear una imagen que cae:

Ejemplo de la at-rule CSS @keyframes con la propiedad transform

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        height: 90%;
      }
      .container {
        margin: 30px auto;
        min-width: 320px;
        max-width: 600px;
        height: 90%;
        overflow: hidden;
      }
      img {
        transform-origin: left center;
        animation: fall 5s infinite;
      }
      @keyframes fall {
        from {
          transform: rotate(0) translateX(0);
          opacity: 1;
        }
        to {
          transform: rotate(90deg) translateX(200px);
          opacity: 0.1;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes example</h2>
    <div class="container">
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs" width="150" height="50" />
    </div>
  </body>
</html>
Pruébalo tú mismo »

Componentes de la sintaxis

ComponenteDescripción
identifierEspecifica el nombre de la animación. Obligatorio.
keyframe-selectorEspecifica el porcentaje de la duración de la animación. Acepta valores de 0% a 100%, from (0%) o to (100%). Obligatorio.
declaration-blockContiene las propiedades CSS y los valores que se aplican en cada keyframe. Obligatorio.

Errores comunes

  • @keyframes solo no hace nada. La regla solo define la animación. Nada se mueve hasta que se referencia el nombre desde un elemento con la propiedad animation-name (o la abreviatura animation) y se le asigna una animation-duration distinta de cero.
  • Los nombres distinguen entre mayúsculas y minúsculas y no deben ser palabras clave globales de CSS. Evita palabras reservadas como none, initial, inherit y unset como nombres de animación.
  • Las reglas de keyframe duplicadas se encadenan. Si dos bloques @keyframes comparten el mismo nombre, el último definido prevalece completamente; no se fusionan.
  • !important dentro de un keyframe se ignora. La especificación de Animaciones descarta específicamente las declaraciones !important dentro de los keyframes.

Temas relacionados

Práctica

Práctica
¿Qué afirmación es correcta sobre los keyframes de CSS?
¿Qué afirmación es correcta sobre los keyframes de CSS?
Was this page helpful?