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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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