Question

我有一个很好的动画设置，所以我有一颗子弹射击一颗星，然后在你将鼠标悬停在枪上之后全部旋转，一切正常，但.......

当你把鼠标从枪上移开后，星星旋转了另一个方向，不好:(任何想法如何让它停下来？

我尝试使用'主动'，但这不适用于动画。

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不再适用。有两种方法可以实现您的目标：

请改用动画。动画具有animation-fill-mode，当设置为forwards时，元素将保留由执行期间遇到的最后一个关键帧设置的计算值。 MDN has more info about it

以下是你在CSS中的表现：

#gun:hover ~ #star {
    -webkit-animation: rotate 4s forwards;
    animation: rotate 4s forwards;
}
@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

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

如果您不想使用动画，则需要编写一些JavaScript。使用hover事件，因为事件不依赖于:hover之类的当前状态。您还会注意到我已将transition-delay css移至#star，因为它可以一直应用于该元素，但无效。我使用jQuery来简洁：

<强> JavaScript的：

$('#gun').hover(function() {
  $('#star').css('transform', 'rotateZ(340deg)');
});

<强> CSS：

#star {
    width: 50px;
    -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;
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    -ms-transition-delay: 1s;
    transition-delay: 1
}

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

<强> - 或 -

您也可以使用vanilla 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-transform:rotateZ(340deg);
    -moz-transform:rotateZ(340deg);
    -o-transform:rotateZ(340deg);
    -ms-transform:rotateZ(340deg);
    transform:rotateZ(340deg);
}

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

Answer 2

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

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

将使转换看起来是“单向”。这是JSFiddle example。

CSS3转换：在悬停时旋转

2 个答案: