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/

Я боюсь, что единственный способ решить это – с помощью javascript, вы должны добавить анимацию как class, а затем удалить ее, когда анимация закончится.

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

http://jsfiddle.net/u7vXT/

Простой трюк сделает работу:

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

Установите «delay» с высоким значением элемента (не: hover).

От: Stackoverflow – Роберт МакКи

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

 $(".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"); }) 

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

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

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

Hello

  • Цепи анимации анимации ядра
  • Метод доступа после завершения анимации UIImageView
  • Как сделать анимацию линии более гладкой?
  • Android делает анимированное видео из списка изображений
  • Как отменить анимацию на мыши после зависания
  • Android-анимация на экране
  • Как нарисовать круг с анимацией в android с размером круга на основе значения
  • Android-анимация не повторяется
  • Анимированная иконка для ActionItem
  • как я могу использовать анимацию в cocos2d?
  • анимация JPanel (слайд) с таймером
  • Давайте будем гением компьютера.