CODEWITHSUNDEEP
animationcsshovertransitionmouseleave
Barlas Apaydin
Barlas Apaydin

Reputation: 7315

How to disable css3 transition mouseleave effect on cubic-bezier method?

I have a CSS3 rotate transform with a cubic-bezier transition-timing-function, it is working fine on mouse over, but i want to disable the mouseleave animation. I prepared a simple jsFiddle to show you.

img {
    transition : all 1s cubic-bezier(0.680,-0.550,0.265,1.550);
}

img:hover {
    transform: rotate(360deg);
}

Upvotes: 1

Views: 1480

Answers (1)

Ana
Ana

Reputation: 37179

You mean you don't want it to transition back when you hover off? You can use an "infinite" (actually very large) transition-delay (that's the second time value in the shorthand) for that.

Like this:

demo

CSS:

img {
    transition: 0s 99999s; /* transition when mouse leaves */
}
img:hover {
    transform: rotate(360deg);

    /* transition on mouseover */
    transition: 1s cubic-bezier(0.680,-0.550,0.265,1.550);
}

Note that this will make the image rotate only on first hover.

If you want to make it rotate for each hover, then you'll have to use keyframe animations. Like this:

demo

CSS (no prefixes, you'll have to add them):

img:hover {
    animation: rot 1s cubic-bezier(0.680,-0.550,0.265,1.550);
}
@keyframes rot {
    to {
        transform: rotate(360deg);
    }
}

Also, I noticed that you were writing the unprefixed property first - you should always put it last. Especially now, when the coming versions of IE, Firefox and Opera are unprefixing transitions.

Upvotes: 1

Related Questions