Animación continua en CSS

Para crear una animación en css se necesita utilizar las siguientes propiedades:

animation-name animation-duration animation-iteration-count animation-delay animation-direction animation-timing-function position overflow width

Además se utiliza la regla @Keyframe para definir los fotogramas claves de la animación

Para un mayor conocimiento de las propiedades de animación puede ingresar al siguiente enlace: https://www.w3.org/TR/css-animations-1/

La estructura HTML

En este ejemplo realizaremos una ondas continuas. Para lograrlo se debe realizar un dibujo de ondas del doble del tamaño del espacio de trabajo. Si lo deseas colocar en un espacio de 1440px las ondas deben tener un ancho de 2880px. (figura 01) Además el inicio debe coincidir con el final. Se trabaja con el formato .svg para no perder calidad si se necesita aumentar el tamaño de la imagen.

figura 01

Luego en la estructura HTML se debe trabajar de este modo

<section class="repovesitdo-bg-bottom home">
<img class="below-transparent-bg" src="img/onda01.svg">
</section>

Animación en el CSS

El código CSS necesario es el siguiente:

El ancho es de 200% para que la imagen salga del espacio definido y se realice la animación constante

.below-transparent-bg {
    z-index: 20;
    position: absolute;
    width: 200%;
    animation-name: onda;
    animation-duration: 60s;
    animation-iteration-count: 5;
    animation-delay: 0s;
    animation-direction: normal;
    animation-timing-function: linear;
}

El padre del contenedor debe usra el overflow: hidden; para que no se visualice el exceso de la imagen

.repovesitdo-bg-bottom.home {
    min-height: 47vw;
    overflow: hidden;
    position: relative;
}

Esta son los fotogramas claves para que la animación se repita. Se utiliza el left:-100%; para que la imagen empiece en la mitad y vaya hasta el principio.

figura 02
@keyframes onda {
    0% {left: -100%;} 
    100% {left: 0%;}
}

Los archivos puedes descargarlo en este enlace

Puede ver un ejemplo en https://investigacion-trajesdelperu.pucp.edu.pe/