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

#css #html5 #css3 #svg #css_animation

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

    

    



    




При hover на .item блок плавно левитирует, но при убирании hover-эффекта от блока,
он резко падает. Что нужно дописать в css, чтобы при убирании hover-эффекта блок плавно
опускался вниз?
    

Ответы

Ответ 1

Вариант с JS и подпиской на события анимации:



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%);
  }
}

  






Альтернативный вариант на чистом CSS (довольно своеобразный, конечно):



.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%);
  }
}

  

    

  



Ответ 2

SVG решение

Наведите курсор мышки на квадратики в любом очередности








Начало анимации begin="mouseover"     

Чтобы квадратики не дергались при повторном наведении курсора, установлен запрет
на повторный запуск анимации.   

restart="whenNotActive"   

Перемещение по оси "Y" во время анимации    

values="150;50;150"