【问题标题】：How to disable css3 transition mouseleave effect on cubic-bezier method?如何在三次贝塞尔方法上禁用 css3 过渡鼠标离开效果？
【发布时间】：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);
}

【问题讨论】：

标签： animation css hover transition mouseleave

【解决方案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 版本都在进行无前缀转换。

【讨论】：