Bootstrap Snippet Animatino hanger move (left to right) using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
<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 id="wrapper">
    <div class="line"></div>
    <div class="circle">
        Left to Right
    </div>
</div>
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
#wrapper{
    margin-left:500px;
    width:300px;
    height:500px;
    background-color:#000;
    position:relative;
    
    
}
#wrapper .line {
    width:1px;
    height:350px;
    background:#ddd;
    position:absolute;
    left:100px;
    top:0;
}
#wrapper .circle {
    width:200px;
    height:200px;
    background:#ddd;
    border-radius:50%;
    color:#f33;
    line-height:200px;
    text-align:center;
    position:absolute;
    top:200px;
    left:0;
    animation: hanger 5s  ease-in-out 2s infinite;
}
@keyframes hanger {
    0%:{left:0px;}
    25%{ left:200px;}
    50%{ left:0px;}
    75%{ left:-200px;}
    100%{ left:0px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Animatino hanger move (left to right)"
Bootstrap 3.3.0 Snippet by naimansari

Related: See More

Questions / Comments:

"Animatino hanger move (left to right)" Bootstrap 3.3.0 Snippet by naimansari

Related: See More

Questions / Comments:

"Animatino hanger move (left to right)"
Bootstrap 3.3.0 Snippet by naimansari