3

How to prevent CSS3 transitions from reversing back? For example: when i use

div
{
-webkit-transition:-webkit-transform 2s;
}
div:hover
{
-webkit-transform:rotate(360deg);
}

Whenever I move my mouse out it is rotating back,how to prevent it? SO that it only rotates forward when I place my mouse on the div and doesn't rotate back when my mouse leaves the div?

4 Answers 4

9

You have probably solved this already but in case you have not here is the solution to your particular problem of a 360 degree roll.

div
{
    -webkit-transition: all 0.0s ;
    -moz-transition: all 0.0s ;
    -o-transition: all 0.0s ;
    transition: all 0.0s;
}

div:hover
    {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);

    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;

}
1
  • This is the correct answer. At least in terms of the simplicity and relevance to what was asked, without skewing into another approach. This approach does just what was asked, removes any lingering "rewind back" transition effect by clearing the transition times for when the item is no longer hovered (when it normally would rewind back).
    – SikoSoft
    Dec 12, 2013 at 22:25
3

You can use CSS animations instead and set the animation-fill-mode property to forwards which will persist the end state.

Here's a quick demo. As you can see it only rotates 360 degrees and then stops (Is this want you want?). If you want it to keep rotating as long as you have the mouse over the div, then you can change forwards to infinite and set the animation-timing-function to linear (to keep a consistent speed).

Like this:

animation: rotate 2s linear infinite;

But it won't look good when you hover out, since it breaks the animation & I don't think there is a fix for this. I hope this helped. If not, maybe a JavaScript solution, as mentioned in the other answer, would be better.

And here's the code from the demo.

HTML

<div class="box"></div>

CSS

.box {
    width: 100px;
    height: 100px;
    background: #333;
}

.box:hover {
    -webkit-animation: rotate 2s forwards;
    animation: rotate 2s forwards;
}

@-webkit-keyframes rotate {
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes rotate {   
  100% { transform: rotate(360deg); }    
}
0

Also with Javascript an CSS Animation will be reversing back (animated rotating backwards as many times as it has been turned forward before), if you for example have an image element rotated for a few times by clicking through a foto gallery and then try to close it using visibility:hidden;

The solution i found was to disable the CSS animation first, before changing the elements settings or hiding the element. This way it will not reverse:

   document.getElementById("picture").style.transition = "none 0s linear";
-2

That's how :hover works. It's only effective while your mouse is over the element. To do something more permanent, you would need JavaScript.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.