Плавная анимация назад

var matchesSelector = (function() { 
  var fn = Element.prototype.matches || 
      Element.prototype.webkitMatchesSelector || 
      Element.prototype.mozMatchesSelector || 
      Element.prototype.msMatchesSelector; 
  return function(element, selector) { 
    return fn.call(element, selector); 
  }; 
})(); 
 
function setAnimatedOnHover(element){   
  function onMouseOver(){ 
    element.classList.add('animated'); 
  } 
   
  function onAnimationEnd(){ 
    if (matchesSelector(element, ':hover')) return; 
    element.classList.remove('animated'); 
  } 
   
  element.addEventListener('mouseover', onMouseOver, false); 
  element.addEventListener('webkitAnimationIteration', onAnimationEnd, false); 
  element.addEventListener('animationiteration', onAnimationEnd, false); 
} 
 
[].forEach.call(document.querySelectorAll('.animated-on-hover'), setAnimatedOnHover);

.container { 
  padding: 2em 0; 
  width: 50%; 
  height: 6em; 
  margin: 3em auto; 
  background: grey; 
} 
 
.item { 
  width: 4em; 
  height: 4em; 
  background: pink; 
  margin: 0 auto; 
} 
 
.item.animated { 
  animation: levitation 1s linear 0.1s infinite alternate; 
} 
 
@keyframes levitation { 
  0%, 100% { 
    transform: translateY(0); 
  } 
  50% { 
    transform: translateY(-30%); 
  } 
}

<div class="container"> 
  <div class="item animated-on-hover"></div> 
</div>

.container { 
  padding: 2em 0; 
  width: 50%; 
  height: 6em; 
  margin: 3em auto; 
  background: grey; 
} 
 
.item-zero { 
  height: 0; 
  transition: height 1s; 
  animation: levitation 3s linear 0.1s infinite alternate; 
} 
     
.item-zero:hover { 
  height: 4em; 
} 
     
.item { 
  width: 4em; 
  height: 4em; 
  background: pink; 
  margin: 0 auto; 
} 
     
@keyframes levitation { 
  0%, 100% { 
    transform: translateY(0); 
  } 
  50% { 
    transform: translateY(-30%); 
  } 
}

<div class="container"> 
  <div class="item-zero"> 
    <div class="item"></div> 
  </div> 
</div>