我有一个 CSS3 rotate
transform
和一个 cubic-bezier
transition-timing-function
,它是鼠标悬停时工作正常,但我想禁用鼠标离开动画。我准备了一个简单的jsFiddle给你看。
img {
transition : all 1s cubic-bezier(0.680,-0.550,0.265,1.550);
}
img:hover {
transform: rotate(360deg);
}
最佳答案
你的意思是你不希望它在你悬停时转换回来?您可以使用“无限”(实际上非常大)transition-delay
(这是 shorthand 中的第二个时间值)。
像这样:
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);
}
请注意,这将使图像仅在第一次悬停时旋转。
如果你想让它在每次悬停时旋转,那么你必须使用 keyframe animations .像这样:
demo
CSS(没有前缀,您必须添加它们):
img:hover {
animation: rot 1s cubic-bezier(0.680,-0.550,0.265,1.550);
}
@keyframes rot {
to {
transform: rotate(360deg);
}
}
此外,我注意到您首先编写了无前缀的属性 - 您应该始终将其放在最后。尤其是现在,当即将推出的 IE、Firefox 和 Opera 版本正在取消前缀转换时。
关于animation - 如何在 cubic-bezier 方法上禁用 css3 transition mouseleave 效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12653270/