5

.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%);
  }
}
<div class="container">
    <div class="item">
    </div>
</div>


    

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

1
  • Добавлено решение на SVG Commented 3 апр. 2017 в 11:05

2 ответа 2

4
+50

Вариант с 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%);
  }
}
<div class="container">
  <div class="item animated-on-hover"></div>
</div>

Альтернативный вариант на чистом 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%);
  }
}
<div class="container">
  <div class="item-zero">
    <div class="item"></div>
  </div>
</div>

12
  • Спасибо, все работает! )) не нужен ли стажер в помощь ? )
    – SvArt713
    Commented 5 нояб. 2016 в 11:55
  • @SvArt713, рад, что помогло. Помощь с чем? :) Commented 5 нояб. 2016 в 12:41
  • )) типо стажера на обучение ?
    – SvArt713
    Commented 5 нояб. 2016 в 13:16
  • Возникает проблема, если таких блоков будет несколько, можно ли это как-то исправить ? codepen.io/SvArt713/pen/QKeBOV
    – SvArt713
    Commented 5 нояб. 2016 в 13:39
  • @SvArt713, просто уберите .container:hover с 23 строчки в стилях, он там не нужен — анимация запускается не на :hover, а скриптами, и убирается скриптами (иначе как раз при исчезании :hover всё прервётся). А насчёт стажёра — я сам пока, можно сказать, без работы, куда тут брать. :) Commented 5 нояб. 2016 в 13:57
1

SVG решение

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    
	  width="300" height="300">
	 <style>
	 :hover#levit1,
	 :hover#levit2,
	 :hover#levit3
	 {
	  fill:dodgerblue;
	 }
   </style>	 
    <rect width="100%" height="100%" fill="grey" />	
	
	<rect id="levit1" x="25" y="150" width="50" height="50" fill="pink" >
		<animate attributeName="y" begin="mouseover"  dur="5s" restart="whenNotActive" values="150;50;150" />
	</rect>
		 <rect id="levit2" x="125" y="150" width="50" height="50" fill="yellowgreen" >
     		 <animate attributeName="y" begin="mouseover"  dur="5s" restart="whenNotActive" values="150;50;150" />
		 </rect>
	 <rect id="levit3" x="225" y="150" width="50" height="50" fill="violet" >
	    <animate attributeName="y" begin="mouseover"  dur="5s" restart="whenNotActive" values="150;50;150" />
	 </rect>
	
	</svg>

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

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

restart="whenNotActive"

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

values="150;50;150"

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.