Floating Box CSS

Floating box css using transition effect

by Ayyappan Sakthivadivel

HTML

<div class="floating-hldr floating"></div>
<div class="floating-hldr floating2"></div>
<div class="floating-hldr floating3"></div>
<div class="floating-hldr floating"></div>
<div class="floating-hldr floating2"></div>
<div class="floating-hldr floating3"></div>
<div class="floating-hldr floating"></div>
<div class="floating-hldr floating2"></div>
<div class="floating-hldr floating3"></div>
<div class="floating-hldr floating"></div>
<div class="floating-hldr floating2"></div>
<div class="floating-hldr floating3"></div>
<div class="floating-hldr floating"></div>
<div class="floating-hldr floating2"></div>
<div class="floating-hldr floating3"></div>
<div class="floating-hldr floating"></div>
<div class="floating-hldr floating2"></div>
<div class="floating-hldr floating3"></div>
<div class="floating-hldr floating"></div>
<div class="floating-hldr floating2"></div>
<div class="floating-hldr floating3"></div>

CSS

.floating-hldr{
  height: 50px; 
  width: 50px; 
  background: rgb(200,200,200); 
  float:left;
  margin-left: 20px;
  margin-top: 30px;
}
.floating {  
    animation-name: floating;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.floating2 {  
    animation-name: floating;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.floating3 {  
    animation-name: floating;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}