Animar background con CSS | Lineal

En este post veremos un pequeño ejemplo de como añadir animación a nuestros backgrounds mediante CSS, generando algo como esto:

Animated Background Sample

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.