animacja css3: hover; zmusić całą animację

Stworzyłem prostą animację odrzuceń którego jestem zastosowanie do stanu elementu :hover:animacja css3: hover; zmusić całą animację

@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; 
}

Animacja działa dobrze, z tym wyjątkiem, że po usunięciu kursora z elementu nagle się zatrzymuje. Czy jest mimo to zmusić go do kontynuowania ustawionej liczby iteracji, nawet jeśli mysz wyszła? Zasadniczo szukam tutaj animacji wyzwalanej przez stan :hover. Jestem nie szukając rozwiązania javascript. I tak nie widziałem, żeby to zrobić w specyfikacji, ale może istnieje oczywiste rozwiązanie, które tu przeoczyłem?

Oto skrzypce grać z: http://jsfiddle.net/dwick/vFtfF/

Źródło

2011-10-08 David Wick

Obawiam się, że jedynym sposobem na rozwiązanie to jest z odrobiną javascript, należy dodać animację jako klasa, a następnie usunąć go Po zakończeniu animacji .

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

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

http://jsfiddle.net/u7vXT/

Źródło

2011-10-08 15:27:40 Duopixel

miał nadzieję uniknąć javascript, ale pomyślałem, że to jedyny sposób. –

Nazwa zdarzenia nieobsługiwanego przez przeglądarkę powinna być cała pisana małymi literami: animationend – jackocnr

https://developer.mozilla.org/en-US/docs/Web/Events/animationend –

Prosta sztuczka będzie wykonać zadanie:

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

Ustaw 'opóźnienie' o wysokiej wartości na elemencie (nie: hover).

Od: Stackoverflow - Robert McKee

Źródło

2013-05-29 04:45:40 Slake

CSS może pomóc w niektórych przypadkach, ale nie wszystkie, poniżej jest kod, który będzie animować odstępy między literami zarówno najechaniu i po najechaniu.

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

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

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

Źródło

2015-02-19 16:19:05

tylko poprawić Duopixel odpowiedź, kiedy runnig nieskończoną animitation mam zrobić:

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

To po prostu nie nagle koniec animacji.

Źródło

2015-08-20 23:32:42

Co zrobić, jeśli chcę zatrzymać animację z wdziękiem po usunięciu wskaźnika? a następnie ponownie uruchomić nieskończoną animację po ponownym najechaniu myszą? – Vinay

Można zaimplementować zdarzenie mouseleave w polu, w którym można dodać ten kod. –

Opracowane rozwiązanie: D Oto skrzypce, jeśli pomaga komukolwiek! http://jsfiddle.net/sSYYE/33/ – Vinay

animacja css3: hover; zmusić całą animację

Odpowiedz

Powiązane problemy