html - 如何保持 CSS3 动画的状态悬停？

Question

我试图在鼠标离开 Logo 时保持 CSS3 动画的状态。 (我想保留顶部的黄色)然后再次悬停时再旋转 180°(底部为黄色)。

我尝试了不同的技术，但我无法成功... 你能帮帮我吗？

<a href="#home" class="logo"><img alt="logo" src="http://beta.florianfrazao.fr/assets/logo.png" width="150" height="150" /></a>

.logo img:hover {
  -webkit-animation: logoAnimation 0.7s 1 forwards;
  -moz-animation: logoAnimation 0.7s 1 forwards;
  -o-animation: logoAnimation 0.7s 1 forwards;
}

@-webkit-keyframes logoAnimation {
 from {
  -webkit-transform: rotate(1deg);
 }
 to {
 -webkit-transform: rotate(180deg);
 }
}

这是我的演示: https://jsfiddle.net/9krmpe34/

谢谢，

弗洛里安

Answer 1

您需要为 Logo 维护 2 个状态，这可以通过使用 2 个类并使用 jQuery 或 javascript 在 mouseenter 上更改它们来实现。

$(".logo").on("mouseenter", function(e){
  if( $(this).hasClass("state1") )
  {
    $(this).removeClass("state1").addClass("state2");
  }
  else
  {
    $(this).removeClass("state2").addClass("state1");
  }
});//mouseenter