Css3 анимация on: hover; заставить всю анимацию

Я создал простую анимацию отскока, которую я применяю к состоянию :hover элемента:

@keyframes bounce {
    0% {
      top: 0;
      animation-timing-function: ease-out;
    }
    17% {
      top: 15px;
      animation-timing-function: ease-in;
    }
    34% {
      top: 0;
      animation-timing-function: ease-out;
    }
    51% {
      top: 8px;
      animation-timing-function: ease-in;
    }
    68% {
      top: 0px;
      animation-timing-function: ease-out;
    }
    85% {
      top: 3px;
      animation-timing-function: ease-in;
    }
    100% {
      top: 0;
    }
}

.box:hover { 
    animation: bounce 1s;
}

Анимация отлично работает, за исключением того, что при удалении курсора из элемента он резко останавливается. Есть ли способ заставить его продолжить заданное число итераций, даже если мышь вышла? В принципе, я ищу здесь анимацию, вызванную состоянием :hover. Я не ищет решение javascript. Я вообще не видел этого в спецификации, но, может быть, есть очевидное решение, которое я пропустил здесь?

Здесь есть скрипка для игры с: http://jsfiddle.net/dwick/vFtfF/

Ответы

Ответ 1

Боюсь, что единственный способ решить эту проблему - это немного JavaScript, вы должны добавить анимацию как класс, а затем удалить ее, когда анимация закончится.

$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("animated")  
})

$(".box").hover(function(){
  $(this).addClass("animated");        
})

http://jsfiddle.net/u7vXT/

Ответ 2

Простой трюк выполнит задание:

-webkit-animation:swing 3600ms ease-in-out 6000s;
-webkit-transform-origin:top;

Установите "delay" с большим значением элемента (не: hover).

От: fooobar.com/questions/257888/...

Ответ 3

просто для улучшения ответа на Duopixel, когда мне нужно бесконечное оживление:

$(".box").css("animation-iteration-count", "1"); 
$(".box").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("animated")  
})
$(".box").hover(function(){
  $(".box").css("animation-iteration-count", "infinite"); 
  $(this).addClass("animated");        
})

Это просто не завершает анимацию.

Ответ 4

CSS может помочь в некоторых случаях, но не для всех, ниже приведен код, который будет анимировать разметку букв как при наведении, так и после наведения.

h1
{
    -webkit-transition:all 0.3s ease;
}

h1:hover
{
    -webkit-transition:all 0.3s ease;
    letter-spacing:3px;
}

<body>
    <h1>Hello</h1>
</body>

Ответ 5

Я создал JsFiddle с этим ответом из того же поста fooobar.com/info/257887/... используя чистый Javascript, если кто-то захочет его использовать.

const elements = document.getElementsByClassName('box');

for (let i = 0; i <= elements.length; i++) {
  elements[i].addEventListener('animationend', function(e) {
    elements[i].classList.remove('animated');
  });

 elements[i].addEventListener('mouseover', function(e) {
   elements[i].classList.add('animated')
 })
}