d2321
5/14/2020 - 10:03 PM

hover_animation_continiue

	http://jsfiddle.net/u7vXT/
	
<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div> 
</div>



.box { 
    position: relative;
    float:left;
    background:#f00; 
    width:50px;
    height:50px;
    margin-right:5px;
}
.box.animated { 
    animation: bounce 1s;
}

@keyframes bounce {
    0% {
      top: 0;
      animation-timing-function: ease-out;
    }
    17% {
      top: 15px;
      animation-timing-function: ease-in;
    }
    34% {
      top: 0;
      animation-timing-function: ease-out;
    }
    51% {
      top: 8px;
      animation-timing-function: ease-in;
    }
    68% {
      top: 0px;
       }
    85% {
      top: 3px;
      animation-timing-function: ease-in;
    }
    100% {
      top: 0;
    }
}