<div class="linear"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="ease"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="ease-in-out"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="ease-in"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="ease-out"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="cubic-bezier-1"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="cubic-bezier-2"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="cubic-bezier-3"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="cubic-bezier-4"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="steps"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

body {
  text-align: center; 
  font: 12px/1 monospace;
  background: #F0EFEE;
  color: #777;
}
div { 
  display: inline-block;
  position: relative; 
  margin: 20px 16px 20px 20px; 
  width: 150px; 
  height: 150px; 
  background:white; 
  box-shadow: 0 0 0 5px rgba(0,0,0,.1); 
  transition:.2s; 
}
div:after {
  content: attr(class);
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 0 6px;
}
i {
  position: absolute;
  width: 5px;
  height: 5px;
  left: 0;
  bottom: 0;
  border-radius: 50%;
  background: #F6AC31;
  animation: move 2s infinite;
}
@keyframes move {
  from {
    left: 0;
    bottom: 0; 
  }
  to { 
    left: 145px; 
    bottom: 145px;
  }  
}
.linear i {
  animation-timing-function: linear; 
}
.ease i { 
  animation-timing-function: ease; 
}
.ease-in i { 
  animation-timing-function: ease-in; 
}
.ease-in-out i { 
  animation-timing-function: ease-in-out; 
}
.ease-out i { 
  animation-timing-function: ease-out; 
}
.cubic-bezier-1 i { 
  animation-timing-function: cubic-bezier(.8,1.5,.2,-1); 
}
.cubic-bezier-1:after {content:"cubic-bezier (.8,1.5,.2,-1)"}
.cubic-bezier-2:after {content:"cubic-bezier (.47,-.44,.49,1.46)"}
.cubic-bezier-3:after {content:"cubic-bezier (1,0,0,.5)"}
.cubic-bezier-4:after{ 
  content: "cubic-bezier (.1,.7,1,1)"; 
}
.cubic-bezier-2 i { 
  animation-timing-function: cubic-bezier(.47,-.44,.49,1.46); 
}
.cubic-bezier-3 i { 
  animation-timing-function: cubic-bezier(1,0,0,.5); 
}
.cubic-bezier-4 i { 
  animation-timing-function: cubic-bezier( .1, .7, 1, .1); 
}
.steps i { 
  animation-timing-function: steps(10,end);
}
.steps:after { 
  content: "steps(10,end)"; 
}
i:nth-child(2) {animation-delay:.1s;}
i:nth-child(3) {animation-delay:.2s;}
i:nth-child(4) {animation-delay:.3s;}
i:nth-child(5) {animation-delay:.4s;}
i:nth-child(6) {animation-delay:.5s;}
i:nth-child(7) {animation-delay:.6s;}
i:nth-child(8) {animation-delay:.7s;}
i:nth-child(9) {animation-delay:.8s;}
i:nth-child(10){animation-delay:.9s;}