Bootstrap Snippet css animation mountain and balloon using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    .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;
        }
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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