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!
Abre 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>Para ver todas las animaciones incluidas en la descarga y probarlas directamente puedes visitar el siguiente enlace.
