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 才能完成更新。 對於遇到此問題的任何人，請確保您的瀏覽器通過重新啟動完全更新。