完成CSS transform当取消hover时

Question

4

.example:hover {
  transform: skew(30deg,20deg);
  transition: all 10s ease-in-out;
}

如果我将鼠标悬停在元素上，它会开始扭曲10秒钟。但如果在10秒之前取消悬停，则会停止扭曲。

是否有一种方法可以取消悬停元素，仍然让它完成完整的10秒扭曲？

换句话说，只需将鼠标悬停在元素上一次，它就会扭曲10秒钟，无论您是否取消悬停。

- Sunny

是否在取消悬停时包含反向效果（即返回正常状态）是一个解决方案吗？像这样：http://jsfiddle.net/NDmwj/（请注意，我将时间缩短为3秒以加快测试速度） - Mr Lister

我需要它在取消悬停后继续朝同一方向旋转。有什么想法吗？ - Sunny

我认为你不能在纯CSS中做到那个；你可能需要像bboy说的那样使用Javascript。不过，我很好奇是否会出现任何仅基于CSS的解决方案。 - Mr Lister

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bboy · Accepted Answer

你需要使用jQuery的hover和css函数。

jsfiddle示例：http://jsfiddle.net/NPnBz/1/ 更新：你可能需要在transform属性上添加正确的前缀。