CSS animation 导致过滤器过渡中断（在镀铬中）

Question

我的 html 中有几个<a> ，它们的背景设计为具有各种图像。 期望的行为是使这些<a>动画化并在页面上滚动，以及应用灰度过滤器。 然后，当它们悬停时，它们会恢复到正常的非灰度模式。

不幸的是，在最新版本的 chrome 中，animation ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 规则似乎干扰了过渡。 我在下面的代码片段中重现了错误。 请注意，在第一次将鼠标悬停在任一动画<div>上时，它们不会过渡以显示其颜色，而是会立即跳转到末尾 animation state （即filter: none ）。 不，让悬停的 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 说filter: grayscale(0)而不是filter: none不能解决它。

如果在此之后立即将鼠标反复移出<div>的边界，您会注意到过渡似乎正常工作。 但是，如果您将鼠标移开太久或尝试其他<div> ，则过渡会再次中断。

我没有发现这在 Firefox 或 Brave 中是一个问题，但更重要的是，我似乎记得当我在我的站点中实现此功能时，我在 chrome 中对其进行了测试并且它有效，所以它一定在此期间被破坏了。 我真的很难过我如何能够解决这个问题，或者如果它是 chrome 中的一个错误，至少可以暂时解决它。

 .thing { background-color: red; width: 50px; height: 50px; filter: grayscale(1); transition: filter 1s; }.thing:hover { filter: none; }.broken { animation: move linear 10s infinite; } @keyframes move { 0% { transform: translateX(0%); } 50% { transform: translateX(500%); } }

 <div class="broken thing">TEST1</div> <div class="broken thing">TEST2</div> <br> <div class="thing">noanim</div> <div class="thing">noanim</div>

Answer 1

原来是 chrome 中的一个错误。 我遇到错误的版本是 64 位版本102.0.5005.115 。

正如misterManSam 指出的那样，更新似乎可以解决问题。 重新启动 chrome 以完成更新（现在使用版本103.0.5060.66 ）后，转换的行为与预期一致。

我以为我拥有最新版本，因为 chrome 没有要求我更新，但令人讨厌的是，只有转到chrome://settings/help才能看到我必须重新启动 chrome 才能完成更新。 对于遇到此问题的任何人，请确保您的浏览器通过重新启动完全更新。