html - CSS3 变换：悬停时旋转

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
}

score 2 · Accepted Answer

The nature of the :hover css selector is that it only applies when the hover is happening on the source element. So the reverse is triggered when the user no longer hovers because the :hover no longer applies. There are two ways to achieve what you want:

Use animations instead. Animations have animation-fill-mode, which when set to forwards causes an element to retain it's computed values set by the last keyframe encountered during execution. MDN has more info about it.

Here's how you'd do it in your 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);
    }
}
```
Demo: http://jsfiddle.net/FPCMt/

If you don't want to use animations, you need to write some JavaScript. Use the hover event, because events don't depend on current state like :hover does. You will also notice I moved the transition-delay css to #star, as it can apply to that element the whole time to no effect. I've used jQuery for succinctness:

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
}

Demo: http://jsfiddle.net/FPCMt/4/

--OR--

You can achieve this with vanilla JavaScript too. I used a CSS class I called shot to apply the transform, since we are lacking jQuery's cross-browser help and it is cleaner that way:

JavaScript:

var gun = document.getElementById('gun');
var star = document.getElementById('star');

gun.onmouseover = function () {
    star.className = 'shot';
};

CSS: (in addition to CSS from jQuery example)

#star.shot {
    -webkit-transform:rotateZ(340deg);
    -moz-transform:rotateZ(340deg);
    -o-transform:rotateZ(340deg);
    -ms-transform:rotateZ(340deg);
    transform:rotateZ(340deg);
}

Demo: http://jsfiddle.net/FPCMt/6/

score 1 · Accepted Answer

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

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

将使过渡看起来是“一种方式”。这是JSFiddle 示例。

html - CSS3 变换：悬停时旋转

2 回答 2

Related

Reference