Guinguette Marais Poitevin

Animaciones CSS

¡CSS permite animar elementos HTML sin necesidad de usar JavaScript o Flash!

En este capítulo conocerás las siguientes propiedades:

• @keyframes
• animation-name
• animation-duration

.

• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

Soporte de los navegadores para las animaciones

Los números de la tabla especifican la primera versión del navegador que soporta completamente la propiedad.

cuando la animación esté completada en un 25%, en un 50% y de nuevo cuando la animación esté completada en un 100%:

El siguiente ejemplo cambiará tanto el color de fondo como la posición del elemento <div> cuando la animación esté completada en un 25%, en un 50% y de nuevo cuando la animación esté completada en un 100%:

Retrasar una animación

La propiedad animation-delay especifica un retraso para el inicio de una animación.

El siguiente ejemplo tiene un retraso de 2 segundos antes de comenzar la animación:

También se permiten valores negativos. Si se utilizan valores negativos, la animación se iniciará como si ya se hubiera estado reproduciendo durante N segundos.

En el siguiente ejemplo, la animación se iniciará como si ya hubiera estado reproduciéndose durante 2 segundos:

Establezca cuántas veces debe ejecutarse una animación

La propiedad animation-iteration-count especifica el número de veces que debe ejecutarse una animación.

El siguiente ejemplo ejecutará la animación 3 veces antes de que se detenga:

El siguiente ejemplo utiliza el valor «infinito» para que la animación continúe para siempre:

Ejecutar la animación en dirección inversa o ciclos alternos

La propiedad animation-direction especifica si una animación debe reproducirse hacia delante, hacia atrás o en ciclos alternos.

La propiedad animation-direction puede tener los siguientes valores:

• normal – La animación se reproduce de forma normal (hacia delante). Este es el valor por defecto
• reverse – La animación se reproduce en sentido inverso (hacia atrás)
• alternate – La animación se reproduce primero hacia delante, luego hacia atrás
• alternate-reverse – La animación se reproduce primero hacia atrás y luego hacia adelante

El siguiente ejemplo ejecutará la animación en sentido inverso (hacia atrás):

Ejemplo

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}

Pruébalo tú mismo »

El siguiente ejemplo utiliza el valor «alternate» para que la animación se ejecute primero hacia delante y luego hacia atrás:

Ejemplo

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animación-dirección: alternate;
}

Pruébalo tú mismo »

El siguiente ejemplo utiliza el valor «alternate-reverse» para que la animación se ejecute primero hacia atrás y luego hacia delante:

Ejemplo

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-dirección: alternate-reverse;
}

Pruébalo tú mismo »

Especifica la curva de velocidad de la animación

La propiedad animation-timing-function especifica la curva de velocidad de la animación.

La propiedad animation-timing-function puede tener los siguientes valores:

• ease – Especifica una animación con un inicio lento, luego rápido, luego termina lentamente (esto es por defecto)
• linear – Especifica una animación con la misma velocidad desde el inicio hasta el final
• ease-in – Especifica una animación con un inicio lento
• ease-out -. Especifica una animación con un final lento
• ease-in-out – Especifica una animación con un inicio y un final lentos
• cubic-bezier(n,n,n,n) – Permite definir sus propios valores en una función cúbica-bezier

El siguiente ejemplo muestra las algunas de las diferentes curvas de velocidad que se pueden utilizar:

Ejemplo

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Pruébalo tú mismo »

Especifica el fill-mode Para una Animación

Las animaciones de CSS no afectan a un elemento antes de que se reproduzca el primer keyframe o después de que se reproduzca el último keyframe. La propiedad animation-fill-mode puede anular este comportamiento.

La propiedad animation-fill-mode especifica un estilo para el elemento de destino cuando la animación no se está reproduciendo (antes de que comience, después de que termine, o ambos).

La propiedad animation-fill-mode puede tener los siguientes valores:

• none – Valor por defecto. La animación no aplicará ningún estilo al elemento antes o después de que se ejecute
• forwards – El elemento conservará los valores de estilo que se establecen en el último fotograma clave (depende de animation-dirección y animation-iteration-count)
• backwards – El elemento obtendrá los valores de estilo que se establece por el primer fotograma clave (depende de la animación-dirección), y retendrá esto durante el periodo de retardo de la animación
• both – La animación seguirá las reglas tanto para adelante como para atrás, extendiendo las propiedades de la animación en ambas direcciones

El siguiente ejemplo permite que el elemento <div> conserve los valores de estilo del último fotograma clave cuando la animación termina:

Ejemplo

div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}

Pruébalo tú mismo »

El siguiente ejemplo permite que el elemento <div> obtenga los valores de estilo establecidos por el primer fotograma clave antes de que comience la animación (durante el periodo de retardo de la animación):

Ejemplo

div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: hacia atrás;
}

Pruébalo tú mismo »

El siguiente ejemplo permite que el elemento <div> obtenga los valores de estilo establecidos por el primer fotograma clave antes de que comience la animación, y conserve los valores de estilo del último fotograma clave cuando la animación termine:

Ejemplo

div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
retraso de la animación: 2s;
modo de relleno de la animación: ambos;
}

Pruébelo usted mismo »

Propiedades de la abreviatura de animación

El siguiente ejemplo utiliza seis de las propiedades de animación:

Ejemplo

div{
nombre-animación: ejemplo;
duración-animación: 5s;
función de temporización de la animación: lineal;
retraso de la animación: 2s;
cuenta de iteraciones de la animación: infinita;
dirección de la animación: alterna;
}

Pruébalo tú mismo »

Se puede conseguir el mismo efecto de animación que el anterior utilizando la propiedad abreviada animation:

Ejemplo

div{
animación: ejemplo 5s lineales 2s infinitos alternos;
}

Pruébalo tú mismo »

¡Ponte a prueba con los ejercicios!

Propiedades de animación CSS

La siguiente tabla lista la regla @keyframes y todas las propiedades de animación CSS:

Propiedad	Descripción
@keyframes	Especifica el código de animación
animación	Una propiedad abreviada para establecer todas las propiedades de animación
animación-delay	Especifica un retardo para el inicio de una animación
animation-direction	Especifica si una animación debe reproducirse hacia delante, hacia atrás o en ciclos alternos
duración de la animación	Especifica cuánto tiempo debe tardar una animación en completar un ciclo
modo de relleno de la animación	Especifica un estilo para el elemento cuando la animación no se está reproduciendo (antes de que comience, después de que termine, o ambos)
animation-iteration-count	Especifica el número de veces que debe reproducirse una animación
animation-name	Especifica el nombre de la animación @keyframes
animation-play-state	Especifica si la animación está en marcha o en pausa
animation-timing-function	Especifica la curva de velocidad de la animación