CSS Animation

Bubble icons

<style>
.bubbles-cont {
        z-index: 0; 
        right: 300px;
        position: absolute;   
    }
    .bubbles-cont-2 {
        z-index: 0; 
        left: 0px;
        margin-bottom: -30px;
        position: absolute;
    }
    
    .bubbles-cont .bubbles .fa-linkedin {
        position: absolute;
        left: 0;
        font-size: 50px;
        animation: animationFrames linear 10s infinite;
        -webkit-animation: animationFrames linear 10s infinite;
        -webkit-filter: blur(1.5px); 
        -moz-filter: blur(1.5px); 
        -o-filter: blur(1.5px); 
        -ms-filter: blur(1.5px); 
        filter: blur(1.5px); 
    }
    .bubbles-cont  .bubbles .fa-github {
        position: absolute;
        left: 100px;
        font-size: 20px;
        animation: animationFrames linear 13s infinite;
        -webkit-animation: animationFrames linear 13s infinite;
        animation-delay: 3s;
        -webkit-filter: blur(3px); 
        -moz-filter: blur(3px); 
        -o-filter: blur(3px); 
        -ms-filter: blur(3px); 
        filter: blur(3px); 
    }
    .bubbles-cont  .bubbles .fa-twitter {
        position: absolute;
        left: 200px;
        font-size: 40px;
        animation: animationFrames linear 15s infinite;
        -webkit-animation: animationFrames linear 15s infinite;
        -webkit-filter: blur(2.5px); 
        -moz-filter: blur(2.5px); 
        -o-filter: blur(2.5px); 
        -ms-filter: blur(2.5px); 
        filter: blur(2.5px); 
    }

    .bubbles-cont-2 .bubbles .fa-linkedin {
        position: absolute;
        left: 10px;
        font-size: 40px;
        animation: animationFrames linear 9s infinite;
        -webkit-animation: animationFrames linear 9s infinite;
        -webkit-filter: blur(2.5px); 
        -moz-filter: blur(2.5px); 
        -o-filter: blur(2.5px); 
        -ms-filter: blur(2.5px); 
        filter: blur(2.5px); 
    }
    .bubbles-cont-2  .bubbles .fa-github {
        position: absolute;
        left: 67px;
        font-size: 30px;
        animation: animationFrames linear 10s infinite;
        -webkit-animation: animationFrames linear 10s infinite;
        animation-delay: 2s;
        -webkit-filter: blur(3px); 
        -moz-filter: blur(3px); 
        -o-filter: blur(3px); 
        -ms-filter: blur(3px); 
        filter: blur(3px); 
    }
    .bubbles-cont-2  .bubbles .fa-twitter {
        position: absolute;
        left: 180px;
        font-size: 26px;
        animation: animationFrames linear 13s infinite;
        -webkit-animation: animationFrames linear 13s infinite;
        animation-delay: 1s;
        -webkit-filter: blur(2px); 
        -moz-filter: blur(2px); 
        -o-filter: blur(2px); 
        -ms-filter: blur(2px); 
        filter: blur(2px); 

    }

@keyframes animationFrames{
  0% {
  opacity:.3;
    bottom: 0px;
  }
  100% {
    opacity:0;
    bottom: 600px;
  } 
}

@-moz-keyframes animationFrames{
  0% {
  opacity:.3;
    bottom:0px;
  }
  100% {
    opacity:0;
    bottom: 600px;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:.3;
    bottom: 0px;
  }
  100% {
    opacity:0;
    bottom: 600px;
  }
}
</style>

<div class="bubbles-cont-2">
        <div class="bubbles">
            <i class="fa fa-linkedin"></i>
            <i class="fa fa-twitter"></i>
            <i class="fa fa-github"></i>
        </div>
    </div>
        <div class="bubbles-cont">
        <div class="bubbles">
            <i class="fa fa-twitter"></i>
            <i class="fa fa-github"></i>
            <i class="fa fa-linkedin"></i>
        </div>
    </div>