Animaciones en CSS3

Ahora desarrollaremos las famosas animaciones de CSS3, conoceremos las formas de aplicar animación a los elementos HTML, pues ahora podemos hacer que un elemento cambie su estilo, controlar tiempos y propiedad a cambiar. Al finalizar estarás en la capacidad de aplicar animaciones a los elementos que quieras y dotarle de vida a tu página hecha con HTML. Entonces ¡Vamos por ello!

Qué es una animación en CSS3

Las animaciones son una nueva característica introducida en CSS3, gracias a ellas ahora podemos aplicar animaciones a cualquier elemento, básicamente consiste en cambiar el estilo de un elemento de forma controlada; por ejemplo podemos hacer que un elemento cambie de color, dimensión, o cualquier propiedad que admita de acuerdo al tipo de elemento que sea.

Cómo hacer una animación con CSS3

Para realizar una animación, primero debemos crear dicha animación mediante una de regla @keyframes, la misma que conoceremos más adelante, en ella se establece la propiedad que cambiará. Una vez creada la animación mediante la regla @keyframes, toca vincular dicha regla al elemento que queremos aplicar dicha animación; esto se hace mediante la propiedad animation-name, la misma que desarrollaremos también más adelante.

Lo importante por ahora es que entiendas lo siguiente: mediante una regla @keyframes establecemos la propiedad o estilo que afectaremos con la animación; después de establecer dicha regla, la asociaremos al elemento que queremos animar mediante una propiedad animation-name, pues la regla @keyframes tendrá un nombre. Mejor veámosla a continuación.

La regla @keyframes

Mediante la regla @keyframes estableceremos los fotogramas clave de la animación, básicamente consiste en indicar las variaciones que se realizarán y el momento en que se ejecutarán.

Una regla de fotogramas clave tiene la siguiente forma: @keyframes nombredelaregla {aquí los fotogramas clave}

Podemos establecer el momento en que se ejecuta el cambio o variación de estilo, para ello es posible utilizar porcentajes que van del 0% al 100%, donde 0% es el momento cero, donde inicia todo, mientras el 100% es el momento final, donde termina todo.

También es posible utilizar palabras claves from equivale a 0% y to equivale a 100%, simplemente hay que ponerlas en cambio.

Entonces podemos ingresar cambios de estilo en cualquier momento entre el inicio (0%) y el fin (100%); veamos un ejemplo a continuación para concretar lo explicado.

Ejemplo de la regla @keyframes

Ejemplo 1.- A continuación estableceremos una regla de fotogramas clave con nombre: cambioderadio, donde aplicaremos un cambio a las esquinas redondeadas de un contenedor, empezaremos (0%) con esquinas redondeadas a 0px, a media (50%) reproducción de animación, las esquinas redondeadas estarán a 20px y al finalizar (100%) estarán a 50px.

@keyframes cambioderadio {
0%{border-radius: 0px;}
50%{border-radius: 20px;}
100%{border-radius: 50px;}
}

Ejemplo 2.- En este ejemplo crearemos una regla de fotogramas clave con nombre: cambiodeancho; el contenedor original será un cuadrado de 200px de lado, mediante la regla de fotogramas clave haremos que el ancho varíe de acuerdo a lo siguiente: al inicio o 0% se mantiene en 200px, en el 40% aumenta a 300px, en el 70% aumentará a 400 y al 100% o el final quedará en 500px.

@keyframes cambiodeancho {
0%{width: 200px;}
40%{width: 300px;}
70%{width: 400px;}
100%{width: 500px;}
}

Nota que una regla de fotogramas clave @keyframes, tiene un nombre, en nuestros ejemplos pusimos de nombre: cambioderadio y cambiodeancho respectivamente, mediante estos nombres vincularemos dicha animación al elemento que queremos. Para dicho fin usaremos la propiedad animation-name, la misma que conoceremos a continuación, además de esta conoceremos muchas más. Veamos.

Propiedades de animación

A continuación conoceremos las propiedades de animación, las mismas que nos ayudarán a controlar la forma, duración, dirección, retraso, etc. de la animación; en resumen, nos permiten establecer cómo se lleva a cabo una regla @keyframes creada previamente.

Es importante señalar que las propiedades de animación van en una declaración CSS normal, apuntando al elemento HTML que queremos, más no dentro de la regla @keyframes.

Animation-name

La propiedad animation-name nos permite vincular una regla @keyframes establecida previamente al elemento que queremos aplicar dichos cambios de fotograma, es decir la animación establecida en la regla @keyframes.

Para vincular simplemente declaramos la propiedad animation-name y en su valor colocamos el nombre que pusimos a la regla @keyframes establecida. Para concretar estas ideas veamos algunos ejemplos.

Ejemplos de animation-name

Ejemplo 1.- en este ejemplo vincularemos una regla @keyframes con nombre: cambiocolor, a un contenedor div en forma de cuadrado de 400px de lado. Los cambios de color serán de la siguiente manera: al principio (0%) será de color rojo, al 50% de ejecución, es decir a la mitad de la reproducción será de color amarillo y al finalizar, es decir al 100% de su ejecución será de color azul.

Entonces primero empezaremos creando el cuadrado de 400px, luego crearemos la regla @keyframes y finalmente las vincularemos; veamos:

Paso 1.- crear el elemento, en nuestro caso el cuadrado de 400px, en realidad será un contenedor div:

<div id="cuadrado" width="400px" height="400px">
</div>

Paso 2.- creamos la regla @keyframes para aplicar los cambios de color

@keyframes cambiocolor {
0%{background-color: red;}
50%{background-color: yellow;}
100%{background-color: blue;}
}

Paso 3.- Bien, ahora vincularemos dicha regla al cuadrado mediante la propiedad animation-name, veamos:

#cuadrado {
Animation-name: cambiocolor;
}

Listo, así de simple, ahora ya sabemos vincular una regla @keyframes a un elemento; sin embargo la animación aún no se ejecutará pues falta declarar algunas propiedades como la duración, el modo, etc. A continuación, conoceremos las propiedades faltantes y al finalizar estaremos en la total capacidad de ejecutar las animaciones.

Animation-duration

Mediante la propiedad animation-duration podemos determinar el tiempo de duración de la animación, es un valor numérico y  la unidad de tiempo empleada generalmente es el segundo (s), aunque también se puede emplear el milisegundo (ms); este es el tiempo que durará la animación de inicio al fin.

El valor por defecto es 0s, es decir si no se establece la duración de la animación, no se ejecutará o no tendrá un efecto visual.

La sintaxis quedará en la siguiente forma: animation-duratio: 7s;

Animation-timing-funtion

Mediante la propiedad animation-timing-funtion podemos establecer la curva de velocidad de nuestra animación, mediante los valores que conoceremos a continuación:

Valores para animation-timing-funtion

• Linear.- este valor hará que la animación se ejecute de manera uniforme, sin cambios en la velocidad de reproducción mientras se lleva a cabo la animación.
• Ease.- este es el valor predeterminado, se trata de una animación que inicia lentamente, luego acelera y termina lento.
• Ease-in.- animación con inicio lento.
• Ease-out.- animación con final lento.
• Ease-in-out.- animación con inicio y final lento.
• Cubic-bezier (n,n,n,n).- valores personalizados con cubic bezier.

La sintaxis quedará de la siguiente forma: animation-timing-funtion: ease;

Animation-delay

La propiedad animation-delay nos permite establecer el tiempo de retraso para la animación, es decir en qué momento empezará a ejecutarse la animación, pues por defecto, una animación se ejecuta inmediatamente.

El valor para animation-delay es un valor numérico cuyas unidades pueden ser expresadas en segundos (s) o milisegundos; veamos una muestra:

La sintaxis quedará será: animation-delay:10s;

Animation-iteration-count

Gracias a la propiedad animation-iteration-count podemos indicar la cantidad de repeticiones de la animación; se supone que una animación tiene un inicio y fin, pero ahora podemos hacer que se vuelva a reproducir una cierta cantidad de veces.

El valor para esta propiedad es un valor numérico, indica el número de veces que se repite la animación; para que una animación siempre se repita podemos emplear el valor “infinite”, a continuación veamos un ejemplo.

por ejemplo: animation-iteration-count: 5;

Animation-direction

Mediante el valor de la propiedad animation-direction podemos indicar de qué forma se ejecuta la animación; veamos cuáles son nuestras opciones o posibles valores.

Valores para animation-direcction

• Normal.- la animación se ejecuta tal como se ordenó, de inicio a fin, es decir desde el 0% al 100% establecido.
• Reverse.- la animación se ejecutará en orden  inverso, es decir de fin a inicio, del 100% al 0% establecido.
• Alternate.- permite alternar la animación, primero en modo normal, luego hacia atrás o reversa y vuelve a ejecutarse hacia adelante. Va, viene y va.
• Alternate-reverse.- en este caso, la animación primero empieza con retroceso, luego en modo normal hacia adelante y luego vuelve a ejecutarse hacia atrás. Viene, va y viene.

Ejemplo: animation-direction: reverse;

Ejemplos de animaciones en CSS3

Ahora que conocimos la forma de crear animaciones y además de las propiedades que nos permitirán controlar dichas animaciones, podemos aplicar dichos conocimientos en conjunto para animar elementos HTML y ver los resultados; para ello plantearemos varios ejercicios que te ayudarán a concretar los conocimientos adquiridos.

Ejemplo1.- Animación de colores

<style>

@keyframes cambiocolor{
0%{background: red;}
50%{background: yellow;}
70%{background: green;}
100%{background: blue;}
}

#cuadrado {
  width: 250px;
  height: 250px;
  background:#000;
  animation-name: cambiocolor;
  animation-duration: 10s;
  animation-timing-function: ease-in;
  animation-delay: 3s;
  animation-iteration-count: 3;
  animation-direction: normal; 
  
}

</style>

<div id="cuadrado"> </div>

Ejemplo 2.- Animación de dimensión

<div id="cuadrado"> </div>

<style>

@keyframes cambiodeancho {
0%{width: 200px;}
40%{width: 300px;}
70%{width: 400px;}
100%{width: 500px;}
}


#cuadrado {
  width: 100px;
  height: 100px;
  background:#ff8e24;
  animation-name: cambiodeancho;
  animation-duration: 10s;
  animation-timing-function: ease-in;
  animation-delay: 3s;
  animation-iteration-count: 3;
  animation-direction: normal; 
  
}

</style>

Ejemplo 3.- Animación de esquinas redondeadas

<div id="cuadrado"> </div>

<style>
@keyframes cambioderadio {
0%{border-radius: 0px;}
50%{border-radius: 100px;}
100%{border-radius: 150px;}
}


#cuadrado {
  width: 300px;
  height: 300px;
  background:#ff8e24;
  animation-name: cambioderadio;
  animation-duration: 10s;
  animation-timing-function: ease-in;
  animation-delay: 3s;
  animation-iteration-count: 3;
  animation-direction: normal; 
  
}

</style>

Animaciones mixtas

En un momento determinado podemos aplicar varios cambios de estilo a la vez, no necesariamente debe un solo estilo, incluso podemos sortear y combinar ciertos fotogramas; a continuación veamos un ejemplo en el que haremos un cambio de dimensiones y colores a la vez.

Se trata de un contenedor div, con esquinas redondeadas a 700px, esto nos garantizará que en todo momento parezca que se trata de un círculo, sin embargo solo lo hacemos para deleitarnos con el efecto visual resultante. Veamos.

<div id="cuadrado"> </div>

<style>
@keyframes cambioderadio {
0%{
  width:10px;
  height:10px;
  background-color: #1f99ff;  }
20%{
  width:60px;
  height:60px;
  background-color: #f2753f;  }
40%{
  width:120px;
  height:120px;
  background-color: #27e60e;  }
60%{
  width:180px;
  height:180px;
  background-color: #f2753f;  }
80%{
  width:240px;
  height:240px;
  background-color: #27e60e;  }
100%{
  width:300px;
  height:300px;
  background-color: #27e60e;  }
  
  }

#cuadrado {
  width: 200px;
  height: 200px;
  background:#ff8e24;
  border-radius:700px;
  animation-name: cambioderadio;
  animation-duration: 15s;
  animation-timing-function: ease-in;
  animation-delay: 3s;
  animation-iteration-count: 3;
  animation-direction: normal; 
  
}

</style>

Múltiples propiedades de animación en una

Ahora es posible establecer múltiples propiedades de animación con una simple declaración de la propiedad animation, veamos como a continuación.

La propiedad animation

La propiedad animation sirve para especificar múltiples propiedades de animación en una sola declaración, simplemente debemos colocar directamente los valores separados por espacios. El orden puede ser importante para que se ejecute correctamente la animación:

• Animation-name
• Animation-duration
• Animation-timing-function
• Animation-delay
• Animation-iteration-count
• Animation-direction

Por ejemplo, los siguientes códigos de animación CSS3 tendrán el mismo resultado:

#cuadrado {
  animation-name: cambiodeancho;
  animation-duration: 10s;
  animation-timing-function: ease-in;
  animation-delay: 3s;
  animation-iteration-count: 3;
  animation-direction: normal; 
  
}

#cuadrado {
animation: cambiodeancho 10s ease-in 3s 3 normal;
}

Ejemplo de propiedad animation CSS3

<div id="cuadrado"> </div>

<style>

@keyframes cambiodeancho {
0%{width: 200px;}
40%{width: 300px;}
70%{width: 400px;}
100%{width: 500px;}
}


#cuadrado {
  width: 100px;
  height: 100px;
  background:#ff8e24;
  animation: cambiodeancho 10s ease-in 3s 3 normal;
  
}

</style>

[popup_anything id=»5821″]