анимация css3: hover;заставить всю анимацию - PullRequest
Новая
       1

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

27 голосов
/ 08 октября 2011

Я создал простую анимацию отскока, которую я применяю к состоянию :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/

Ответы [ 5 ]

28 голосов
/ 08 октября 2011

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

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

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

http://jsfiddle.net/u7vXT/

4 голосов
/ 29 мая 2013

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

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

Установите задержку с высоким значением элемента (не: hover).

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

2 голосов
/ 21 августа 2015

только для улучшения ответа 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");        
})

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

0 голосов
/ 24 июня 2019

Я создал JsFiddle с этим ответом из того же поста https://stackoverflow.com/a/7697786/8335898, используя чистый 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')
 })
}
0 голосов
/ 19 февраля 2015

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

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

h1:hover
{
    -webkit-transition:all 0.3s ease;
    letter-spacing:3px;
}
<body>
    <h1>Hello</h1>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...