CSS3变换:悬停时旋转

Question

我有一个很好的动画设置，所以我有一个子弹射击一个明星，然后旋转后，你悬停在枪上，所有的工作，但......

当你把鼠标从枪上拿开后，星星会朝另一个方向旋转，这不太好:(你有什么办法让它停止吗？

我试着用“active”代替，但在动画中不起作用。

CSS

#star {
  width:48px;
  height:49px;
  position:absolute;
  z-index:5;
  left:922px;
  top:63px;
  -webkit-transition: all 4s ease-out;
  -moz-transition: all 4s ease-out;
  -o-transition: all 4s ease-out;
  -ms-transition: all 4s ease-out;
  transition: all 4s ease-out;
}   

#gun:hover ~ #star {
  -webkit-transform:rotateZ(340deg);
  -moz-transform:rotateZ(340deg);
  -o-transform:rotateZ(340deg);
  -ms-transform:rotateZ(340deg);
  transform:rotateZ(340deg);
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -o-transition-delay: 1s;
  -ms-transition-delay: 1s;
  transition-delay: 1
}

Answer 1

:hover css选择器的本质是仅当悬停在源元素上时才适用。因此，当用户由于:hover不再适用而不再悬停时，将触发相反的操作。有两种方法可以实现你想要的：

1. 改用动画。动画具有animation-fill-mode，当设置为forwards时，它会使元素保留由执行过程中遇到的最后一个关键帧设置的计算值。MDN has more info about it。

下面是你如何在你的CSS中做到这一点：

#gun:hover ~ #star {-webkit-动画:向前旋转4s；动画:向前旋转4s；}@-webkit-关键帧旋转{ 100% { -webkit-transform:旋转(360deg)；}}@关键帧旋转{ 100% { transform: rotate(360deg)；}}

http://jsfiddle.net/FPCMt/

• If ：你不想使用动画，你需要写一些JavaScript。使用hover事件，因为事件不像:hover那样依赖于当前状态。您还会注意到，我将transition-delay css移到了#star，因为它可以一直应用于该元素，但不起任何作用。为了简洁，我使用了jQuery：

JavaScript:

$(‘#gun’).hover(){ $('#star').css('transform'，'rotateZ(340deg)')；})；

CSS:

#star { width: 50px；-webkit-transition:全4缓出；-moz-transition:全4缓出；-o-transition:全4缓出；-ms-transition:全4缓出；transition:全4缓出；-webkit-transition-delay: 1s；-moz-transition-delay: 1s；-o-transition-delay: 1s；-ms-transition-delay: 1s；transition-delay: 1}

演示： http://jsfiddle.net/FPCMt/4/

-或--

你也可以用普通的JavaScript来实现这一点。我使用了一个名为shot的CSS类来应用转换，因为我们缺少jQuery的跨浏览器帮助，而且这种方式更简洁：

JavaScript:

var gun = document.getElementById('gun')；var star = document.getElementById('star')；gun.onmouseover = function () { star.className = 'shot'；}；

CSS : (除了jQuery示例中的CSS)

#star.shot {-webkit-变换:旋转Z(340deg)；-moz-变换:旋转Z(340deg)；-o-变换:旋转Z(340deg)；-ms-变换:旋转Z(340deg)；变换:旋转Z(340deg)；}

演示： http://jsfiddle.net/FPCMt/6/

Answer 2

您可以简单地为从非悬停状态到悬停状态以及从悬停状态到非悬停状态的转换指定不同的transition-delay。后一种转换的延迟非常大，例如

#star {
  /*
  other styles here
  */
  transition-delay: 9999s;
} 

将使过渡看起来是“单向的”。这是JSFiddle example。