<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <ul class="bubbles"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </div>

body { background: #ff4f4f; width: 100%; height: 100%; overflow: hidden } .bubbles { position: relative; top: 0; left: 0; width: :100%; height: 100%; } .bubbles li { position: absolute; list-style: none; display: flex; width: 20px; height: 20px; background: rgba(255,255,255,.2); animation: animate 25s linear infinite; bottom: -800px; } .bubbles li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0; } .bubbles li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; } .bubbles li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; } .bubbles li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; } .bubbles li:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; } .bubbles li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; } .bubbles li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; } .bubbles li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; } .bubbles li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; } .bubbles li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 12s; } @keyframes animate { 0% { transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; } 100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; } }