为什么我的 css 转换有时会在退出悬停后保持悬停状态？答案

【问题标题】：Why are my css transitions sometimes keeping the hover state after exiting hover?为什么我的 css 转换有时会在退出悬停后保持悬停状态？
【发布时间】：2014-01-25 09:24:20
【问题描述】：

JSFiddle

CSS 过渡已设置为在悬停时增加 transform:scale(x) 属性。它按预期工作，但有时播放中的元素将保持在增加的比例值，而不是恢复到原始比例值。

似乎大多数时候，当退出元素的悬停状态时，一切正常。但是，在某些情况下，退出一个元素的悬停状态会导致另一个元素“捕捉”到悬停状态。

我不确定是什么原因造成的，因为它似乎是随机发生的。如果您只是将鼠标随意悬停在元素上，您几乎会立即看到它。（/edit/ - 尝试将鼠标悬停在一个元素上，然后用鼠标退出 DOWN。然后返回 UP 到另一个元素顶部的内容区域。这似乎是触发问题的最一致方式）

抱歉这个看起来很荒谬的例子 - 我不得不删除以前的图像，因为文件路径很敏感。

/edit/ - 似乎是forwards 的animation-fill-mode 值导致了这个问题，尽管目前尚不清楚原因。考虑到该值旨在应用于元素的最终（100% 帧）css 值，似乎包含forwards 不会导致此问题。事实上，它似乎应该纠正它。

是否有人对此问题的原因有任何意见？它是 Chrome 独有的还是在其他浏览器中持续存在？

【问题讨论】：

无法复制。特定于浏览器？
是的，我在使用 IE 时遇到了问题，尤其是在使用谷歌浏览器时。当我尝试类似的事情时。
我正在使用 Chrome v31.0.1650.63 - 我增加了悬停状态的缩放属性以在存在此问题时创建更明显的效果 - 尝试将鼠标悬停在一个元素上，然后将鼠标悬停在父分区然后将鼠标悬停在父级中的不同元素上。当鼠标离开父级并随后将鼠标悬停在与前一个不同的元素上时，此问题似乎最常发生。
有人能重现这个吗？ - 我想创建一个仅使用 CSS（无 javascript/jquery）的效果，它在悬停时扩展每个图像，并在未悬停时将其返回到原始大小。
我可以重现该问题。 31.0.1650.63 米。似乎也与运动的速度有关；缓慢移动鼠标不会实现。

标签： css hover css-transitions css-animations css-transforms

【解决方案1】：

我认为这是 Chrome 中的某种错误。

问题似乎与动画中的 forwards 属性有关；我删除了它，错误似乎消失了。

无论如何都不需要，因为 100% 关键帧是比例 (1, 1) 不透明度 (1)

【讨论】：

这很令人困惑，但它确实有效。不过，我不明白为什么会这样。 W3C 将forwards 的animation-fill-mode 值定义为：“动画结束后（由animation-iteration-count 确定），动画将应用动画结束时间的属性值。”因为你提到的css值在动画的开头和结尾是一样的，我用forwards还是normal应该没关系
我很乐意将您的答案标记为已接受的答案，我只是想让其他人有机会回答最初的问题 - 具体来说，如果有人能解释为什么会出现此错误，那就太好了发生以及是否在其他浏览器中持续存在
如你所说，使用 forward 或 normal 不应该。这显然是一个错误，所以逻辑在这里不适用。但是，一切都一样，让事情尽可能简单总是一个好主意。而且 normal 比 forwards 更简单（至少对于浏览器而言）