Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="container">
  <div class="sphere"></div>
     <div class="sphere"></div>
      <div class="sphere"></div>
      <div class="sphere"></div>
    
      <div class="wall"></div>
    
     
  </div>
</body>
</html>
 
​
* {
​
  margin:0;
  padding:0;
}
​
body {
  margin:200px 0 0 50px;
  min-width:500px;
}
​
.wall {
  display:inline-block;
  height:100px;
  width:10px;
  background:red;
  vertical-align:middle;
}
​
.sphere {
  
  display:inline-block;
  vertical-alшgn:middle;
  margin-right:50px;
  width:50px;
  height:50px;
  border-radius:50%;
  background: #878;
  
  box-shadow: inset 0 1px 3px  white,
    inset 0 -5px 5px #767,
    0 5px 6px -2px  #000;
  
  -webkit-box-shadow: inset 0 1px 3px  white,
    inset 0 -5px 5px #767,
    0 5px 6px -2px  #000;
  
  -moz-box-shadow: inset 0 1px 3px  white,
    inset 0 -5px 5px #767,
    0 5px 6px -2px  #000;
  
  
  
  position:relative;
  
   -webkit-animation: move 0.5s ease-in-out,
    pause 0.5s ease-in-out,
    move4 0.5s ease-in-out; 
  
   -moz-animation: move 0.5s ease-in-out,
    pause 0.5s ease-in-out,
    move4 0.5s ease-in-out; 
​
}
​
.sphere:before {
  content:"";
  position:absolute;
  width:15px;
  height:10px;
  border-radius:inherit;
  background:white;
  left:50%;
  top:25%;
  margin-left:-10px;
  
  box-shadow:0 0 10px white; 
  -webkit-box-shadow:0 0 10px white; 
  -moz-box-shadow:0 0 10px white;
  
 
}
​
.sphere:nth-child(1) {
  
  -webkit-animation-delay:0, 0.5s, 3.5s ;
  -webkit-animation-duration: 0.5s, 3s, 0.5s;
  
  -moz-animation-delay:0, 0.5s, 3.5s ;
  -moz-animation-duration: 0.5s, 3s, 0.5s;
}
​
.sphere:nth-child(2) {
  
  -webkit-animation-delay:0.5s, 1s, 3s;
  -webkit-animation-duration: 0.5s, 2s, 0.5s;
  
  -moz-animation-delay:0.5s, 1s, 3s;
  -moz-animation-duration: 0.5s, 2s, 0.5s;
}
.sphere:nth-child(3) {
  
  -webkit-animation-delay:1s, 1.5s, 2.5s;
  -webkit-animation-duration: 0.5s, 1s, 0.5s;
  
  -moz-animation-delay:1s, 1.5s, 2.5s;
  -moz-animation-duration: 0.5s, 1s, 0.5s;
}
​
.sphere:nth-child(4) {
  
  -webkit-animation-delay:1.5s, 2s, 2s;
  -webkit-animation-duration: 0.5s, 0, 0.5s;
  
  -moz-animation-delay:1.5s, 2s, 2s;
  -moz-animation-duration: 0.5s, 0, 0.5s;
}
​
@-webkit-keyframes move {
  
  0% {-webkit-transform: translateX(0);}  
​
  100% {-webkit-transform: translateX(55px);}
}
​
@-webkit-keyframes pause {
  
  0% {-webkit-transform: translateX(55px);}  
  100% {-webkit-transform: translateX(55px);}
}
​
@-webkit-keyframes move4 {
  
  0% {-webkit-transform: translateX(55px);}  
  100% {-webkit-transform: translateX(0);}
}
​
@-moz-keyframes move {
  
  0% {-moz-transform: translateX(0);}  
  100% {-moz-transform: translateX(55px);}
}
​
@-moz-keyframes pause {
  
  0% {-moz-transform: translateX(55px);}  
  100% {-moz-transform: translateX(55px);}
}
​
@-moz-keyframes move4 {
  
  0% {-moz-transform: translateX(55px);}  
  100% {-moz-transform: translateX(0);}
}
​
​
​
​
​
​
​
​
​
​
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dmkimpro
0viewers