問題描述
如何在三次貝塞爾方法上禁用 css3 過渡鼠標離開效果？ (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);
}
參考解法
方法 1:
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.
(by Barlas Apaydin、Ana)