.clouds {
    width: 200px;
    height: 300px;
    position: absolute;
}

.cloud1 {
    width: 100px;
    height: 150px;
    top: 70px;
    z-index: 10;
    fill: #eee;
    /* Animation shorthand syntax order: name, duration, timing-function, delay, iteration-count, direction, fill-mode */
    -webkit-animation: move-right 20s linear infinite;
    -moz-animation: move-right 20s linear infinite;
    -o-animation: move-right 20s linear infinite;
    animation: move-right 20s linear infinite;
}

.cloud1-sm {
    width: 90px;
    height: 130px;
    top: 40px;
    z-index: 10;
    fill: #eee;
    /* Animation shorthand syntax order: name, duration, timing-function, delay, iteration-count, direction, fill-mode */
    -webkit-animation: move-left 20s linear infinite;
    -moz-animation: move-left 20s linear infinite;
    -o-animation: move-left 20s linear infinite;
    animation: move-left 20s linear infinite;
}

.cloud2 {
    top: 75px;
    right: 0;
    z-index: 10;
    fill: #eee;
    -webkit-animation: move-left 35s linear 10s infinite backwards;
    -moz-animation: move-left 35s linear 10s infinite backwards;
    -o-animation: move-left 35s linear 10s infinite backwards;
    animation: move-left 35s linear 10s infinite backwards;
}

.cloud3 {
    width: 220px;
    height: 320px;
    top: 180px;
    z-index: 10;
    fill: #eee;
    -webkit-animation: move-right 50s linear 10s infinite backwards;
    -moz-animation: move-right 50s linear 10s infinite backwards;
    -o-animation: move-right 50s linear 10s infinite backwards;
    animation: move-right 50s linear 10s infinite backwards;
}

.cloud4 {
    width: 80px;
    height: 120px;
    top: 20px;
    z-index: 10;
    fill: #eee;
    -webkit-animation: move-right 30s linear 10s infinite backwards;
    -moz-animation: move-right 30s linear 10s infinite backwards;
    -o-animation: move-right 30s linear 10s infinite backwards;
    animation: move-right 30s linear 10s infinite backwards;
}

/*Right*/
@keyframes move-right {
    from {
        -webkit-transform: translate(-400px);
    }

    to {
        -webkit-transform: translateX(2000px);
    }
}

@-webkit-keyframes move-right {
    from {
        -webkit-transform: translateX(-400px);
    }

    to {
        -webkit-transform: translateX(2000px);
    }
}

@-moz-keyframes move-right {
    from {
        -webkit-transform: translateX(-400px);
    }

    to {
        -webkit-transform: translateX(2000px);
    }
}

/*Left*/
@keyframes move-left {
    from {
        right: -400px;
    }

    to {
        right: 2000px;
    }
}

@-webkit-keyframes move-left {
    from {
        right: -400px;
    }

    to {
        right: 2000px;
    }
}

@-moz-keyframes move-left {
    from {
        right: -400px;
    }

    to {
        right: 2000px;
    }
}