Animation Box Bouncing - CSS

 

Alternate for the animation-direction property in CSS to bouncing the box.

DEMO

CSS

.bounce-box {
  width: 100px;
  height: 100px;
  background: limegreen;
  position: relative;
  animation: bouncing 2s infinite;
  animation-direction: alternate;
}
@keyframes bouncing {
  0%   {background: limegreen; left: 0px; top: 0px;}
  50%  {background: orange; left: 0; top: 100px;}
  100% {background: limegreen; left: 0px; top: 0px;}
}