web-dev-qa-db-fra.com

animation CSS3 sur: hover; forcer toute l'animation

J'ai créé une animation de rebond simple que je postule à l'état :hover d'un élément:

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

L'animation fonctionne bien, sauf que lorsque vous supprimez votre curseur de l'élément, il s'arrête brusquement. Est-il possible de le forcer à continuer le nombre défini d'itérations même si la souris est sortie? Fondamentalement, ce que je recherche ici est une animation déclenchée par l’état :hover. Je suis pas à la recherche d'une solution javascript. Je n'ai de toute façon pas vu cela dans les spécifications, mais peut-être qu'il y a une solution évidente que j'ai manquée ici?

Voici un violon avec lequel jouer: http://jsfiddle.net/dwick/vFtfF/

animationcss3
25
David Wick

Je crains que la seule façon de résoudre ce problème soit avec un peu de javascript. Vous devez donc ajouter l'animation en tant que classe, puis la supprimer une fois l'animation terminée.

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

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

http://jsfiddle.net/u7vXT/

26
Duopixel

Un truc simple fera le travail: 

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

Définissez le 'délai' avec une valeur élevée sur l'élément (pas: survol).

De: Stackoverflow - Robert McKee

4
Slake

juste pour améliorer la réponse de Duopixel, lors de l'exécution d'une animation infinie, je dois faire:

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

Ceci ne termine tout simplement pas brusquement l'animation.

1
Willy Cornejo

CSS peut aider dans certains cas, mais pas tous. Vous trouverez ci-dessous le code qui animera l’espacement des lettres sur les survols et les survols.

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

h1:hover
{
    -webkit-transition:all 0.3s ease;
    letter-spacing:3px;
}
<body>
    <h1>Hello</h1>
</body>

0
Siddharth Thevaril