.mer{
    position: absolute;
    top: 0;
}
    #houle1{
        height: 418px;
        width: 100vw;
        z-index: 5;
        background: url(../img/houle1.png);
        animation: vague-mouvement 300s infinite linear, vague-houle 15s infinite ease-in-out;
    }
    #houle2{
        height: 450px;
        width: 100vw;
        z-index: 4;
        opacity: 0;
        background: url(../img/houle2.png);
        animation: vague-mouvement 300s infinite linear, vague-houle 15s infinite ease-in-out;
        animation-delay: 0.3s;
    }
    #houle3{
        height: 488px;
        width: 100vw;
        z-index: 3;
        opacity: 0;
        background: url(../img/houle3.png);
        animation: vague-mouvement 300s infinite linear, vague-houle 15s infinite ease-in-out;
        animation-delay: 0.5s;
    }
    #mousse{
        height: 560px;
         width: 100vw;
        z-index: 2;
        opacity: 0;
        background: url(../img/mousse.png);
        animation: vague-mouvement 300s infinite linear, vague-houle 15s infinite ease-in-out;
        animation-delay: 0.8s;
    }
    #sable-mouille{
        height: 560px;
        width: 100vw;
        z-index: 1;
        opacity: 0;
        background: url(../img/sable-mouillé.png);
        animation: vague-mouvement 300s infinite linear, sable-mouille 15s infinite linear;
    }

        @keyframes vague-mouvement {
        0% { background-position-x: 0; }
        100% { background-position-x: -100vw; }
        }
        @keyframes vague-houle{ 
        0% { transform: translateY(-600px); opacity: 1; }
        30% { transform: translateY(-250px); }
        100% { transform: translateY(-600px); opacity: 0.99; }
        }
        @keyframes sable-mouille{
        0% { transform: translateY(-300px); opacity: 0.2; }
        34% { transform: translateY(-320px); }
        35% { transform: translateY(-250px); }
        100% { transform: translateY(-300px); opacity: 0.2; }   
        }