Question

当鼠标离开徽标时，我正在尝试保持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

您需要为徽标维护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

Answer 2

不幸的是，你需要使用JavaScript，因为单独的CSS无法实现你想要实现的目标。试试这个：

var img=document.querySelector(".logo>img"),
    rotate=180;
img.addEventListener("mouseover",function(){
    this.style.transform="rotate("+rotate+"deg)";
},0);
img.addEventListener("transitionend",function(){
    rotate+=180
},0);

.logo>img{
    transition:transform .7s;
}

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

如何在悬停时保持CSS3动画的状态？

2 个答案: