W3Docs

Apariencia

Español

Propiedad CSS animation ​

La propiedad animation se usa para animar (cambiar gradualmente de un estilo a otro) propiedades CSS con valores continuos: propiedades de diseño (border, height, width, etc.), propiedades que definen la posición (left, top), tamaños de fuente, colores y opacidades.

La propiedad animation es una de las propiedades CSS3.

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

INFO

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 animación, primero debes especificar qué debe ocurrir en momentos concretos durante la animación. Esto se define con la regla at @keyframes.

La regla @keyframes consiste en la palabra clave “@keyframes” seguida de animation-name, que identifica la animación. Luego, la animación se aplica a un elemento usando este identificador como valor de la propiedad animation-name.

Entre llaves, colocamos selectores de fotogramas clave, que definen los fotogramas clave (o puntos de referencia) en la secuencia de animación cuando los estilos deben cambiarse. El selector de fotograma clave puede comenzar con un porcentaje (%) o con las palabras clave “from” (igual que 0%) y “to” (igual que 100%). 0% es el punto de inicio de la animación y 100% es el punto final.

Ejemplo de animación con la regla @keyframe: ​

Ejemplo de la propiedad animation con @keyframes

html
<!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>
Try it Yourself »

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 "green" a "grey".

Propiedades relacionadas con Animation ​

Animation es la propiedad abreviada que se usa para establecer todas las propiedades de animación en una sola declaración. A continuación, enumeramos todas las propiedades estándar relacionadas con animation.

Ahora veamos las propiedades relacionadas con animation en acción.

Ejemplo de animación con algunas propiedades relacionadas con animation: ​

Ejemplo de animación con algunas propiedades relacionadas con animation:

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

Animation-name ​

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

Sintaxis de la propiedad animation-name

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

Ejemplo de la propiedad animation-name: ​

Ejemplo de la propiedad animation-name

html
<!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>
Try it Yourself »

Animation-duration ​

Define la duración de tiempo (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

css
animation-duration: time | initial | inherit

Ejemplo de la propiedad animation-duration: ​

Ejemplo de la propiedad animation-duration

html
<!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>
Try it Yourself »

Animation-timing-function ​

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

Sintaxis de la propiedad animation-timing-function

css
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”: ​

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

html
<!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>
Try it Yourself »

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

css
animation-delay: time | initial | inherit

Ejemplo de la propiedad animation-delay: ​

Ejemplo de la propiedad CSS animation-delay

html
<!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>
Try it Yourself »

Animation-direction ​

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

Sintaxis de la propiedad animation-direction

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

Se pueden aplicar los siguientes valores:

  • normal — (predeterminado) la animación se reproduce hacia adelante (fotogramas clave 0% - 100%)
  • reverse — la animación se reproduce hacia atrás (fotogramas clave 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: ​

Ejemplo de la propiedad animation-direction:

html
<!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>
Try it Yourself »

Animation-iteration-count ​

Establece el número de veces que debe reproducirse un ciclo de animación 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á indefinidamente.

WARNING

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

Sintaxis de la propiedad animation-iteration-count

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

Ejemplo de la propiedad animation-iteration-count: ​

Ejemplo de la propiedad CSS animation-iteration-count:

html
<!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>
Try it Yourself »

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

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

Puede asumir los siguientes valores:

  • forwards - especifica que el elemento debe conservar los valores de estilo establecidos por el último fotograma clave (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 fotograma clave (depende de animation-direction) y mantenerlos durante el período de animation-delay.
  • both - especifica que la animación debe seguir las reglas de forwards y backwards.
  • none - (predeterminado) especifica que no se aplicará ningún estilo al elemento antes o después de que se ejecute la animación

Ejemplo de la propiedad animation-fill-mode con el valor “forwards”: ​

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

html
<!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>
Try it Yourself »

Animation-play-state ​

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

Sintaxis de la propiedad animation-play-state

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

El valor predeterminado es running.

Ejemplo de la propiedad animation-play-state con el valor “running”: ​

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

html
<!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>
Try it Yourself »

Múltiples animaciones ​

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

Ejemplo de múltiples animaciones en un selector: ​

Ejemplo de la propiedad Animation con múltiples animaciones

html
<!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>
Try it Yourself »

Práctica ​

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

¿Te resulta útil?

Vista previa dual-run — compárala con las rutas Symfony en producción.