#yana {
    animation-name: yana, yana-h;
    animation-duration: 3s, 6s;
    animation-delay: 0s, 3s;
    animation-iteration-count: 1, infinite;
    animation-timing-function: ease-in-out, linear;
    animation-fill-mode: forwards, none;
}

#john {
    animation-name: john, john-h;
    animation-duration: 3s, 7s;
    animation-delay: 0s, 3s;
    animation-iteration-count: 1, infinite;
    animation-timing-function: ease-in-out, linear;
    animation-fill-mode: forwards, none;
}

@keyframes yana {
    0% {
        transform: translate(-8%, -8%); /* Déplacement diagonale depuis haut gauche */
    }
    50% {
        transform: translate(0, 0); /* position neutre*/
    }
    100% {
        transform: translate(8%, 0); /* Déplacer l'image 1 de 25 pixels vers la droite */
    }
  } 

@keyframes john {
    0% {
        transform: translate(8%, 8%);
    }
    50% {
        transform: translate(0, 0); /* position neutre*/
    }
    100% {
        transform: translate(-8%, 0);
    }
} 

@keyframes yana-h {
    0% {
        transform: translate(8%, 0px);
    }
    25% {
        transform: translate(-3%, -4%);
    }
    50% {
        transform: translate(8%, 0px);
    }
    75% {
        transform: translate(3%, 0px);
    }
    100% {
        transform: translate(8%, 0px);
    }
  } 

@keyframes john-h {
    0% {
        transform: translate(-8%, 0px);
    }
    25% {
        transform: translate(0px, 4%);
    }
    50% {
        transform: translate(-8%, 0px);
    }
    75% {
        transform: translate(-3%, 0px);
    }
    100% {
        transform: translate(-8%, 0px);
    }
}