CODEWITHSUNDEEP
cssanimation
UXerUIer
UXerUIer

Reputation: 2338

Animating on hover and having the animation freeze when it finishes in CSS

I have an onhover animation for a div called logo. I want the logo to tilt when the mouse is hovered over. However, I don't want the logo to go back to it's original state when the animation is finished, until someone moves their mouse out of the element (mouse out).

#logo:hover{
    -webkit-animation-name:logorotate;
    animation-name:logorotate;
    -webkit-animation-duration:0.5s;
}
@-webkit-keyframes logorotate{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(10deg);
    }
}

Upvotes: 0

Views: 2106

Answers (2)

vals
vals

Reputation: 64254

If you want the hover to have a state, and that when someone hovers the change is smooth, that is a transition and not an animation

#logo{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

#logo:hover{
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}

Upvotes: 1

Philip G
Philip G

Reputation: 4104

Try something like this: 

#logo.mousein{
    -webkit-animation-name:logorotate;
    animation-name:logorotate;
    -webkit-animation-duration:0.5s;
}
@-webkit-keyframes logorotate{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(10deg);
    }
}

then add following jquery: 

$(document).read(function(){
     $("#logo").mouseover(function(){
        $(this).addClass("mousein");
     });

});

(Havn't tested the code yet, but schould work)

Upvotes: 0

Related Questions