CSS3 transform:rotate on hover - html

Question

I have a nice animation set up so I have a bullet shooting a star that then rotates all after you hover over the gun, All works as it should but.......
After you take the mouse off the gun the star rotates the other way, Not good :( any ideas how to get it to stop?
I have tried to use 'active' instead but that doesn't work with an animation.
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

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/

Answer 2

You can simply specify different transition-delay for transition from non-hovered state to hovered and from hovered to non-hovered. Very large delay for the latter transition, e.g.
#star {
/*
other styles here
*/
transition-delay: 9999s;
}
will make the transition appear to be "one way". Here is the JSFiddle example.