.bubble{
    width: 100px;
    height: 100px;
    background: #152f38;
    border-radius: 200px;
    position: relative;
}

.x1 {
    left: 200px;
    transform: scale(0.9);
    opacity: 0.2;
    animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x2 {
    left: 800px;
    transform: scale(0.6);
    opacity: 0.5;
    animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.x3 {
    left: 1550px;
    transform: scale(0.8);
    opacity: 0.3;
    animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x4 {
    left: 670px;
    transform: scale(0.75);
    opacity: 0.35;
    animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x5 {
    left: 1050px;
    transform: scale(0.8);
    opacity: 0.3; 
    animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
@keyframes moveclouds { 
    0% { 
        top: 500px;
    }
    100% { 
        top: -500px;
    }
}

@keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}