Я не могу найти способ воспроизведения анимации до конца, когда элемент: hover.CSS3 Анимация + @keyframe запускается до конца
<div class="picture"></div>
.picture:hover {
-webkit-animation:swing 1s ease-in-out;
}
@-webkit-keyframes swing {
[...]
}
Возможно не полное решение, но добавить следующее к вашему классу изображения:
-webkit-animation:swing 3600ms ease-in-out 6000s;
-webkit-transform-origin:top;
JsFiddle: http://jsfiddle.net/5SueS/4/
Интересно, запустив анимацию через некоторое время - но почему анимация не останавливается на ': hover OUT', поскольку анимация тигрирует по:: hover. – Slake
Потому что та же анимация запускается на классе изображения (хотя и с нелепой долгой задержкой). Он видит, что у него тоже есть анимация, поэтому он продолжает играть даже после выскочки. Вероятно, есть лучший способ, например, сказать, что играть в анимацию 0 раз вместо длительной задержки, но это было первое, что я пробовал, и это сработало. –
Кажется, что нет чистых CSS решений, поэтому лучшее решение с JS:
Я сделал, как этот http://jsfiddle.net/Z5aq7/
Вместо зависания, я просто сделал это класс (.animate) и добавив класс по наведению
$('.picture').hover(function(){
$(this).addClass('animate');
});
Надеюсь это поможет!
Я думаю, что тег: hover недостаточно для этого, мне нужны js или другие псевдо-теги. – Slake