body{
    background: cornflowerblue;
}

.avion{
    position: absolute;
    top: 200px;
    left: 200px;
    
    animation-name: vol;
    animation-duration: 15s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

.nuage{
    position: absolute;
    top: 30px;
    left: 120%;
    
    animation-name: nuage;
    animation-duration: 16s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.nuage2{
    position: absolute;
    top: 75%;
    left: 120%;
    width: 500px;
    
    animation-name: nuage2;
    animation-duration: 6s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.nuage3{
    position: absolute;
    top: 70%;
    left: 110%;
    width: 75px;
    
    animation-name: nuage3;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.nuage4{
    position: absolute;
    top: 20%;
    left: 150%;
    width: 500px;
    
    animation-name: nuage4;
    animation-duration: 8s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.nuage5{
    position: absolute;
    top: 25%;
    left: 150%;
    width: 75px;
    
    animation-name: nuage5;
    animation-duration: 40s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.nuage6{
    position: absolute;
    top: 50%;
    left: 250%;
    width: 75px;
    
    animation-name: nuage6;
    animation-duration: 50s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.nuage7{
    position: absolute;
    top: 18%;
    left: 180%;
    
    animation-name: nuage7;
    animation-duration: 26s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/**KEYFRAMES**/

@keyframes vol{
    0%{transform: translateY(0)
    }
    25%{transform: translateY(40px)
    }
    50%{transform: translateY(0)
    }   
    75%{transform: translateY(40px)
    }
    100%{transform: translateY(0px)
    }
}

@keyframes nuage{
    0%{transform: translateX(0)}
    100%{transform: translateX(-2750px)}
}

@keyframes nuage2{
    0%{transform: translateX(0)}
    100%{transform: translateX(-4000px)}
}

@keyframes nuage3{
    0%{transform: translateX(0)}
    100%{transform: translateX(-2350px)}
}

@keyframes nuage4{
    0%{transform: translateX(0)}
    100%{transform: translateX(-4500px)}
}

@keyframes nuage5{
    0%{transform: translateX(0)}
    100%{transform: translateX(-3400px)}
}

@keyframes nuage6{
    0%{transform: translateX(0)}
    100%{transform: translateX(-5400px)}
}

@keyframes nuage7{
    0%{transform: translateX(0)}
    100%{transform: translateX(-4000px)}
}