如何在三次贝塞尔方法上禁用 css3 过渡鼠标离开效果?
Posted
技术标签:
【中文标题】如何在三次贝塞尔方法上禁用 css3 过渡鼠标离开效果?【英文标题】:How to disable css3 transition mouseleave effect on cubic-bezier method? 【发布时间】:2012-09-21 02:54:45 【问题描述】:我有一个 CSS3 rotate
transform
和一个 cubic-bezier
transition-timing-function
,它在鼠标悬停时工作正常,但我想禁用 mouseleave 动画。我准备了一个简单的jsFiddle 给你看。
img
transition : all 1s cubic-bezier(0.680,-0.550,0.265,1.550);
img:hover
transform: rotate(360deg);
【问题讨论】:
【参考方案1】:您的意思是当您悬停时不希望它转换回来?您可以为此使用“无限”(实际上非常大)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 版本都在进行无前缀转换。
【讨论】:
以上是关于如何在三次贝塞尔方法上禁用 css3 过渡鼠标离开效果?的主要内容,如果未能解决你的问题,请参考以下文章
用 JavaScript 实现三次贝塞尔动画库 - 前端组件化