[Manual CSS] Animaciones chulas con CSS3 para tu web

Publicado por el 6 , Julio, 2015, en DISEÑO & PROGRAMACIÓN, Sin comentarios

Hoy os traigo un pequeño manual o tutorial de como implementar movimientos o animaciones CSS3 a los elementos de tu sitio web.

Las animaciones en CSS3 permiten darle movimiento a cualquiera de los elementos de tu sitio web, permitiéndote crear loops o efectos de transición que harán que tu web se vea más elegante y dinámica. Ésto se consigue por medio de la función “animation” y sus propiedades. Que son las que brindan la posibilidad de configurar la duración, el ritmo y otras características del movimiento.

Propiedades de la función animation de CSS3:

  • animation-delay: Es el tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.
  • animation-name: Especifica el nombre de la regla @keyframes.
  • animation-timing-function: Indica el ritmo de la animación. Es decir, cómo se muestran los fotogramas de la animación, estableciendo curvas de aceleración.
  • animation-direction: Nos indica si la animación se ve obligada a retroceder hasta el fotograma de inicio cuando se finalice la secuencia, o si debe comenzar desde el principio al llegar al final.
  • animation-iteration-count: El número de iteraciones (Repeticiones) de nuestra animación.
  • animation-duration: Tiempo de duración de la animación.
  • animation-fill-mode: Cuáles serán los valores de nuestras propiedades cuando se finaliza la animación.
  • animation-play-state: Pausa o reanuda nuestra animación.

¿Qué son los keyframes?

Cuando especificamos un código CSS dentro de la propiedad keyframe, la animación empezará a cambiar gradualmente. Desde un estilo CSS inicial (0%) a el estilo con el que quieras finalizar (100%) .

Ejemplo Keyframe:

@keyframes MiAnimacion
{
    from {background-color: white;}
    to {background-color: blue;}
}

Estas líneas de código le dirán al elemento que empiece su animación de color blanco y  vaya cambiando a azul. Así, al utilizar las propiedades de animación, le podré decir qué tiempo deberá durar su transición.

¡Tu primera animación con CSS3!

peraAbre bien los ojos, y pon atención. En el siguiente ejemplo utilizaré los CSS en la misma hoja donde tendré mi código HTML, con el fin de que sea más fácil de apreciar pero nunca lo hagas así, ya que son malas prácticas y el CSS siempre tiene que estar separado en su propio archivo o hoja de estilos y enlazarlo al html por medio de link rel.

Además agregaré –moz- y -webkit- en las propiedades y Keyframes, para que la compatibilidad con las versiones de los distintos navegadores sea máxima.

En este ejemplo, tendremos un circulo construido con CSS, cambiando de blanco a azul.

<!DOCTYPE html>
<html>
<head>
<style>
div {
     width: 100px;
     height: 100px;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     background: blue;
    -webkit-animation-name: MiAnimacion; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: MiAnimacion;
    animation-duration: 4s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes MiAnimacion {
    from {background-color: white;}
    to {background-color: blue;}
}
/* keyframes standard */
@keyframes MiAnimacion {
    from {background-color: white;}
    to {background-color: blue;}
}
</style>
</head>
<body>
<center><h1><p>Mi primera animación</p></h1></center>
<center><div></div></center>
</body>
</html>
Sé que he sido un poco malo, pero si te lo doy todo hecho desde el principio, seguramente no hubieses leído lo anterior, ni aprendido a hacerlo por ti mismo 😉
Ahora si, te dejo una hoja de estilos CSS con animaciones predefinidas que puedes descargar para que puedas usarlas solamente dando el nombre de la animación a los elementos que quieras animar en tu sitio web.

Para ver todas las animaciones incluidas en la descarga y probarlas directamente puedes visitar el siguiente enlace.

http://daneden.me/animate 

!Ya estás listo para darle vida a tu página web¡

Carlos Ramos Marquez

Amante del diseño y desarrollo en tecnologías Web y luchador en la gran batalla del posicionamiento SEO, elaborando las estrategias del comandante Google.

Ver mis posts - Ir a mi web

Sígueme:
TwitterFacebookGoogle Plus

Etiquetas:

,

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies