demo

Question

我有一个带有rotate transform的CSS3 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);
}

Answer 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都是前所未有的转换时。

如何在cubic-bezier方法上禁用css3过渡mouseleave效果？

1 个答案:

demo

demo