gpt4 book ai didi

animation - 如何在 cubic-bezier 方法上禁用 css3 transition mouseleave 效果?

转载 作者:行者123 更新时间:2023-11-28 18:36:10 26 4
gpt4 key购买 nike

我有一个 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com