
#fontDefile {
    z-index: 0;
    position: absolute;
    overflow: hidden;
    border: 1px solid #000;
    width: 650px;
}


/* In this the div is given display flex so that three background image make side to side and an animation is done */


/* L'animtion à pour but de faire défiler un fond indéfiniment. */

#fontDefile>div {
    display: flex;
    width: 2000px;
    position: relative;
    left: 0px;
    /* -1300px */
    animation-name: defileBG;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* L'animation va durer 20s, et déplacer l'image de 1300px; */
@keyframes defileBG {
    0% {
        left: 0px;
    }
    100% {
        left: -1300px;
    }
}

#fontDefile img {
    width: 650px;
    height: auto;
}


/* On renverse la seconde image (le côté gauche va à droite et inversement ) pour faire "coller" les images.
De cette façon la partie droite de l'image 1, sera identique à la partie gauche de l'image 2, et le collage ne se verra pas */
#fontDefile img:nth-child(2) {
    transform: scaleX(-1);
}

