En este post veremos un pequeño ejemplo de como añadir animación a nuestros backgrounds mediante CSS, generando algo como esto:
Pero antes una pequeña introducción:
Las animaciones no son más que una secuencia de transiciones en los estilos de un elemento.
Para definir una animación necesitamos 2 cosas:
1. Configurar la animación.
2. Definir la secuencia/transiciones ( keyframes ).
La configuración de la animación se realiza a través de las reglas
animation-* que se define en el elemento que queremos animar.
Para profundizar lee más sobre
estas reglas
La secuencia/transiciones se definen a través de un conjunto ( una o más ) de reglas
@keyframes, en donde se especifícan los cambios en las propiedades de estilo que se aplicarán en un momento determinado.
Dale una leída a la
sección de fotogramas, si quieres profundizar.
Ahora procedamos a desglozar el ejemplo.
Layout
<div class="wrapper-bg">
<div class="bg">
</div>
</div>
Estilos
.wrapper-bg
{
height: 45%;
width: 100%;
overflow: hidden;
}
.bg
{
position: absolute;
top: 0;
bottom: 0;
background: url('https://i1.wp.com/alikgriffin.smugmug.com/Portfolio/i-qJS339c/1/X3/AlikGriffin_Fuji_X-T1_56mm_Fukuoka_City_Rush-X3.jpg') no-repeat 0 center;
width: 200%;
animation: move-forward 40s linear infinite;
}
//En la secuencia manipulamos la propiedad transform que desplaza una cierta cantidad sobre el eje horizontal al elemento.
@keyframes move-forward
{
from { transform: translateX( 0 ) }
to { transform: translateX( -750px ) }
}
Si bien las transiciones pueden ser sobre cualquier propiedad de un elemento, para este caso en específico estamos usando transform, ya que ésta forza al navegador a usar el GPU interno que nos permitirá tener animaciones más fluidas sobre todo en dispositivos móviles.
Y así de fácil tenemos nuestra animación.
Comentarios