<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="hotAirBalloonMovement"> <div class="animatedBalloon"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri2"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri3"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri3"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri4"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri5"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri6"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri7"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri8"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri9"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri10"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri11"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri12"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri13"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri14"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri15"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> </div>

.hotAirBalloonMovement { width: 100%; height: 100%; position: absolute; bottom: 0; overflow:hidden; } .hotAirBalloonMovement .animatedBalloon, .hotAirBalloonMovement .meri2, .hotAirBalloonMovement .meri3, .hotAirBalloonMovement .meri4, .hotAirBalloonMovement .meri5, .hotAirBalloonMovement .meri6, .hotAirBalloonMovement .meri7, .hotAirBalloonMovement .meri8, .hotAirBalloonMovement .meri9, .hotAirBalloonMovement .meri10, .hotAirBalloonMovement .meri11, .hotAirBalloonMovement .meri12, .hotAirBalloonMovement .meri13, .hotAirBalloonMovement .meri14, .hotAirBalloonMovement .meri15 { display:inline-block; position:absolute; top:-10%; -webkit-animation:hotAirBalloonMovement 25s linear 1s infinite; animation:hotAirBalloonMovement 25s linear 1s infinite; } .hotAirBalloonMovement .meri2 { left:10%; -webkit-animation:meri2 25s linear 8s infinite; animation:meri2 25s linear 8s infinite; } .hotAirBalloonMovement .meri3 { left:17%; -webkit-animation:meri2 25s linear 18s infinite; animation:meri2 25s linear 18s infinite; } .hotAirBalloonMovement .meri4 { left:24%; -webkit-animation:meri2 25s linear 3s infinite; animation:meri2 25s linear 3s infinite; } .hotAirBalloonMovement .meri5 { left:30%; -webkit-animation:meri2 25s linear 3s infinite; animation:meri2 25s linear 3s infinite; } .hotAirBalloonMovement .meri6 { left:37%; -webkit-animation:meri2 25s linear 4s infinite; animation:meri2 25s linear 4s infinite; } .hotAirBalloonMovement .meri7 { left:44%; -webkit-animation:meri2 25s linear 9s infinite; animation:meri2 25s linear 9s infinite; } .hotAirBalloonMovement .meri8 { left:50%; -webkit-animation:meri2 25s linear 15s infinite; animation:meri2 25s linear 15s infinite; } .hotAirBalloonMovement .meri9 { left:57%; } .hotAirBalloonMovement .meri10 { left:64%; -webkit-animation:meri2 25s linear 10s infinite; animation:meri2 25s linear 10s infinite; } .hotAirBalloonMovement .meri11 { left:71%; } .hotAirBalloonMovement .meri12 { left:78%; -webkit-animation:meri2 25s linear 7s infinite; animation:meri2 25s linear 7s infinite; } .hotAirBalloonMovement .meri13 { left:85%; } .hotAirBalloonMovement .meri14 { left:40%; -webkit-animation:meri2 25s linear 17s infinite; animation:meri2 25s linear 17s infinite; } .hotAirBalloonMovement .meri15 { left:60%; -webkit-animation:meri2 25s linear 16s infinite; animation:meri2 25s linear 16s infinite; } @-webkit-keyframes hotAirBalloonMovement { 0% { top:0; opacity:0;} 10% {top:10%; opacity:1;} 20% {top:20%; opacity:1;} 30% {top:30%; opacity:1;} 40% {top:40%; opacity:1;} 50% {top:50%; opacity:1;} 60% {top:60%; opacity:1;} 70% {top:70%; opacity:1;} 80% {top:80%; opacity:1;} 90% {top:90%; opacity:1;} 100% { top:100%; opacity:0;} } @-moz-keyframes hotAirBalloonMovement { 0% { top:0; opacity:0;} 10% {top:10%; opacity:1;} 20% {top:20%; opacity:1;} 30% {top:30%; opacity:1;} 40% {top:40%; opacity:1;} 50% {top:50%; opacity:1;} 60% {top:60%; opacity:1;} 70% {top:70%; opacity:1;} 80% {top:80%; opacity:1;} 90% {top:90%; opacity:1;} 100% { top:100%; opacity:0;} } @keyframes hotAirBalloonMovement { 0% { top:0; opacity:0;} 10% {top:10%; opacity:1;} 20% {top:20%; opacity:1;} 30% {top:30%; opacity:1;} 40% {top:40%; opacity:1;} 50% {top:50%; opacity:1;} 60% {top:60%; opacity:1;} 70% {top:70%; opacity:1;} 80% {top:80%; opacity:1;} 90% {top:90%; opacity:1;} 100% { top:100%; opacity:0;} } @-webkit-keyframes meri2 { 0% { top:0; opacity:0;} 10% {top:10%; opacity:1;} 20% {top:20%; opacity:1;} 30% {top:30%; opacity:1;} 40% {top:40%; opacity:1;} 50% {top:50%; opacity:1;} 60% {top:60%; opacity:1;} 70% {top:70%; opacity:1;} 80% {top:80%; opacity:1;} 90% {top:90%; opacity:1;} 100% { top:100%; opacity:0;} } @-moz-keyframes meri2 { 0% { top:0; opacity:0;} 10% {top:10%; opacity:1;} 20% {top:20%; opacity:1;} 30% {top:30%; opacity:1;} 40% {top:40%; opacity:1;} 50% {top:50%; opacity:1;} 60% {top:60%; opacity:1;} 70% {top:70%; opacity:1;} 80% {top:80%; opacity:1;} 90% {top:90%; opacity:1;} 100% { top:100%; opacity:0;} } @keyframes meri2 { 0% { top:0; opacity:0;} 10% {top:10%; opacity:1;} 20% {top:20%; opacity:1;} 30% {top:30%; opacity:1;} 40% {top:40%; opacity:1;} 50% {top:50%; opacity:1;} 60% {top:60%; opacity:1;} 70% {top:70%; opacity:1;} 80% {top:80%; opacity:1;} 90% {top:90%; opacity:1;} 100% { top:100%; opacity:0;} } .enter { color: #f33 !important; position: absolute !important; top: 85% !important; left: 50%; z-index: 1 !important; width: 120px; margin-left: -67px; }