Propiedad animation de CSS

La propiedad animation de CSS te permite animar elementos — cambiando gradualmente uno o más valores CSS con el tiempo — sin necesidad de JavaScript. Funciona en propiedades cuyos valores se pueden interpolar, como dimensiones de diseño (border, height, width), posición (left, top), font size, color y opacity.

Esta página cubre el shorthand animation, las ocho propiedades longhand individuales animation-*, la regla at @keyframes que las impulsa, cómo ejecutar varias animaciones a la vez, y cómo respetar a los usuarios que prefieren el movimiento reducido. animation es una de las propiedades CSS3.

Una animación se construye a partir de dos partes: una regla @keyframes que describe cómo se ve el elemento en puntos a lo largo de la línea de tiempo, y la propiedad animation (o sus longhands) en el elemento que indica cómo reproducir esa línea de tiempo — durante cuánto tiempo, cuántas veces, en qué dirección, etc.

Los navegadores antiguos pueden requerir el prefijo -webkit- para compatibilidad con versiones anteriores.

Información

Las propiedades que usan una palabra clave como valor, como display: none; o visibility: hidden;, no se pueden animar. Las propiedades con valores como height: auto; tampoco se pueden animar.

La regla at @keyframes

Para usar animaciones primero debes especificar qué debería ocurrir en momentos específicos durante la animación. Esto se define con la regla at @keyframes.

La regla @keyframes consiste en la palabra clave "@keyframes" seguida del nombre de la animación, que identifica la animación. La animación se aplica luego a un elemento utilizando este identificador como valor de la propiedad animation-name.

Entre llaves, ponemos los selectores de keyframe, que definen los fotogramas clave (o puntos de referencia) en la secuencia de animación cuando los estilos deben cambiar. El selector de keyframe puede comenzar con un porcentaje (%) o con las palabras clave "from" (equivalente a 0%) y "to" (equivalente a 100%). El 0% es el punto de inicio de la animación, y el 100% es el punto final.

Ejemplo de animación con la regla @keyframe:

Ejemplo de la propiedad animation con @keyframes

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 4s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property.</div>
  </body>
</html>

Pruébalo tú mismo »

En este ejemplo, vinculamos la animación al elemento <div>. La animación durará 4 segundos y cambiará gradualmente el color de fondo del elemento <div> de "verde" a "gris".

Propiedades relacionadas con la animación

animation es la propiedad shorthand para establecer todas las propiedades de animación individuales en una sola declaración. Los longhands estándar se resumen a continuación.

Propiedad	Establece	Valores comunes
`animation-name`	La regla @keyframes a reproducir	un nombre, `none`
`animation-duration`	Cuánto dura un ciclo	`2s`, `500ms` (predeterminado `0s` — sin animación)
`animation-timing-function`	La curva de velocidad dentro de cada ciclo	`ease`, `linear`, `ease-in-out`, `cubic-bezier(…)`
`animation-delay`	Espera antes de comenzar	`1s`, `-2s` (negativo inicia a mitad de la animación)
`animation-iteration-count`	Cuántas veces reproducirla	un número, `infinite`
`animation-direction`	Hacia adelante, inverso o de ida y vuelta	`normal`, `reverse`, `alternate`
`animation-fill-mode`	Estilos antes/después de ejecutarse	`none`, `forwards`, `backwards`, `both`
`animation-play-state`	Si se ejecuta o se pausa	`running`, `paused`

Veamos ahora las propiedades relacionadas con la animación en acción.

Ejemplo de animación con algunas propiedades relacionadas:

@keyframes pulse {
  /* declare animation actions here */
}

.element {
  animation-name: pulse;
  animation-duration: 3.5s;
  animation-timing-function: ease-in;
  animation-delay: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

/*
  The same can be declared using the animation shorthand property 
*/

.element {
  animation: pulse 3.5s ease-in 1s alternate infinite none running;
}

El orden de los valores en el shorthand es mayormente flexible, con dos reglas a recordar: el nombre debe estar presente, y cuando aparecen tanto una duración como un retraso, el primer valor de tiempo es la duración y el segundo es el retraso. Cualquier valor omitido vuelve a su valor predeterminado (por ejemplo, omitir animation-iteration-count reproduce la animación una sola vez).

Animation-name

Esta propiedad define el nombre de la regla @keyframes que deseas aplicar.

Sintaxis de la propiedad animation-name

animation-name: keyframe-name | none | initial | inherit

Ejemplo de la propiedad animation-name:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        padding: 50px;
        animation: element 4s infinite;
      }
      @keyframes element {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-name example</h2>
    <div>The name of the animation is set as "element".</div>
  </body>
</html>

Pruébalo tú mismo »

Animation-duration

Define la duración (en segundos o milisegundos) que tarda la animación en completar un ciclo. Si esta propiedad no se especifica, la animación no ocurrirá.

Sintaxis de la propiedad animation-duration

animation-duration: time | initial | inherit

Ejemplo de la propiedad animation-duration:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 7s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #eee
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property</div>
  </body>
</html>

Pruébalo tú mismo »

Animation-timing-function

Esta propiedad define cómo progresará una animación a lo largo de la duración de cada ciclo, no a lo largo de toda la animación.

Sintaxis de la propiedad animation-timing-function

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit

Ejemplo de la propiedad animation-timing-function con el valor "ease":

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s infinite;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-timing-function: ease;
        /* Safari 4.0 - 8.0 */
        animation: element 5s infinite;
        animation-timing-function: ease;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Animation-delay

Esta propiedad establece el tiempo (en segundos o milisegundos) entre la carga del elemento y el inicio de la animación.

Sintaxis de la propiedad animation-delay

animation-delay: time | initial | inherit

Ejemplo de la propiedad animation-delay:

Ejemplo de la propiedad CSS animation-delay

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #1c87c9;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 3s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example</h2>
    <p>Here the animation starts after 3 seconds.</p>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Animation-direction

Define si la animación debe reproducirse en sentido inverso en ciclos alternos o no.

Sintaxis de la propiedad animation-direction

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit

Se pueden aplicar los siguientes valores:

normal — (predeterminado) la animación se reproduce hacia adelante (keyframes 0% - 100%)
reverse — la animación se reproduce hacia atrás (keyframes 100% - 0%)
alternate — la animación se reproduce hacia adelante, luego se invierte y se repite.
alternate-reverse — la animación se reproduce hacia atrás y luego hacia adelante.

Ejemplo de la propiedad animation-direction:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: normal;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays forwards.</p>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Animation-iteration-count

Establece el número de veces que un ciclo de animación debe reproducirse antes de detenerse. El valor predeterminado es uno, pero se puede establecer cualquier valor entero positivo. Si estableces la palabra clave infinite, la animación se reproducirá de forma indefinida.

Advertencia

Un entero cero o negativo nunca reproducirá la animación.

Sintaxis de la propiedad animation-iteration-count

animation-iteration-count: number | infinite | initial | inherit

Ejemplo de la propiedad animation-iteration-count:

Ejemplo de la propiedad CSS animation-iteration-count:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      div {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 30px 0;
        border-radius: 50%;
        animation-name: pulse;
      }
      .element-one {
        background-color: #1c87c9;
        animation-duration: 3s;
        animation-iteration-count: 3;
      }
      .element-two {
        margin: 0;
        background-color: #83bf42;
        animation-duration: 5s;
        animation-iteration-count: 2;
      }
      @keyframes pulse {
        0% {
          left: 0;
        }
        50% {
          left: 50%;
        }
        100% {
          left: 0;
        }
      }
    </style>
  </head>
  <body>
    <h2>The animation-iteration-count example</h2>
    <p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>

Pruébalo tú mismo »

Animation-fill-mode

Esta propiedad especifica un estilo para el elemento aplicado antes o después de que se ejecute la animación.

Sintaxis de la propiedad animation-fill-mode

animation-fill-mode: none | forwards | backwards | both | initial | inherit

Puede asumir los siguientes valores:

forwards - especifica que el elemento debe mantener los valores de estilo establecidos por el último keyframe (depende de las propiedades animation-iteration-count y animation-direction).
backwards - especifica que el elemento debe obtener los valores de estilo establecidos por el primer keyframe (depende de animation-direction) y mantenerlos durante el período animation-delay.
both - especifica que la animación debe seguir las reglas tanto de forwards como de backwards.
none - (predeterminado) especifica que no se aplicará ningún estilo al elemento antes ni después de que se ejecute la animación.

Ejemplo de la propiedad animation-fill-mode con el valor "forwards":

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-fill-mode: forwards;
        /* Safari 4.0 - 8.0 */
        animation: element 5s;
        animation-fill-mode: forwards;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: blue;
        }
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Animation-play-state

Esta propiedad especifica si la animación se está reproduciendo o está en pausa.

Sintaxis de la propiedad animation-play-state

animation-play-state: paused | running | initial | inherit

El valor predeterminado es running.

Ejemplo de la propiedad animation-play-state con el valor "running":

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #ccc;
        position: relative;
        animation: play 10s;
        animation-play-state: running;
      }
      @keyframes play {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-play-state example</h2>
    <p>Here the animation-play-state is set to "running".</p>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Múltiples animaciones

Es posible declarar múltiples animaciones en un selector; solo necesitas separar los valores con comas.

Ejemplo de múltiples animaciones en un selector:

Ejemplo de múltiples animaciones con la propiedad animation

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .element {
        height: 200px;
        width: 200px;
        background-color: #1c87c9;
        animation: pulse 5s ease infinite alternate, nudge 5s linear infinite alternate;
      }
      @keyframes pulse {
        0%,
        100% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
      }
      @keyframes nudge {
        0%,
        100% {
          transform: translate(0, 0);
        }
        50% {
          transform: translate(150px, 0);
        }
        80% {
          transform: translate(-150px, 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="element"></div>
  </body>
</html>

Pruébalo tú mismo »

Respetar el movimiento reducido

El movimiento grande o constante puede provocar náuseas, mareos o migrañas en algunos usuarios. Los sistemas operativos exponen una configuración de "reducir movimiento", y puedes respetarla con la media query prefers-reduced-motion — desactivando las animaciones (o reduciéndolas) para esos usuarios mientras las mantienes para los demás.

.element {
  animation: pulse 4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}

Es una buena práctica envolver cualquier movimiento no esencial en esta query para que tus animaciones sigan siendo accesibles.

Errores comunes

Sin animation-duration no hay animación. La duración predeterminada es 0s, por lo que los keyframes nunca tienen oportunidad de ejecutarse.
Los valores keyword y auto no se animan. Como se señaló anteriormente, las propiedades como display, visibility y height: auto no se pueden interpolar. Anima opacity y transform en su lugar — también son las más eficientes de animar.
forwards solo funciona si el número de iteraciones es finito. animation-fill-mode: forwards mantiene el último keyframe después de que termina la animación; con infinite nunca termina, por lo que no hay nada que mantener.
El orden importa para los valores de tiempo en el shorthand. El primer <time> es la duración, el segundo es el retraso.

Propiedades relacionadas

@keyframes — define la línea de tiempo de la animación.
animation-name — elige qué regla @keyframes reproducir.
transition — anima entre dos estados en un evento como :hover.
transform — mueve, escala y rota elementos (ideal para animar).

Práctica

¿Cuáles de las siguientes afirmaciones sobre la animación CSS son correctas?

CSS permite animar elementos HTML sin usar JavaScript.La propiedad animation en CSS es una propiedad shorthand para varias propiedades de animación, como: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction.En la animación CSS, la regla @keyframes se usa para definir la animación.El efecto de animación solo tiene lugar si el nombre de la animación no está especificado.Las propiedades de animación CSS deben aplicarse directamente a los elementos HTML.