"css animation mountain and balloon"
Bootstrap 3.3.0 Snippet by calvin52019

Post to Facebook Tweet this

<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 ----------> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Css animation</title> </head> <body> <div class="content-wraper"> <div class="balloon"> </div> </div> </body> </html>
.content-wraper{ width:1350px; height:400px; background:url(http://ionic.io/img/home/ionic-mountain-feature.png) no-repeat 0 bottom/100%; } .balloon{ width:100px; height:150px; background:url(http://ionic.io/img/home/ionic-balloon.png) no-repeat top center/100%; animation: balloon 60s ease infinite; position:relative; top:320px; left:30px; } @keyframes balloon { 0% { left:30px; top:320px; } 30% { left:1100px; top:30px; } 69% { left:100px; top:120px; } 100% { left:30px; top:320px; } }

Related: See More

Gaia Bootstrap Template Pro
Ripple Dot Animation
Success and Error Icon Animation
Bootstrap4 navigation border animation

Questions / Comments: