"CSS 動畫在 Chrome (iOS) 上不流暢"

Question

我在 iOS 設備上的 Chrome 瀏覽器上的 CSS 動畫有問題。 動畫卡入到位並且不流暢。 在 Safari、Firefox 或桌面 Chrome 上一切正常。

這是一個在 iOS 版本的 Chrome 上滯后的簡單示例：

小提琴<\/a>

有什么辦法可以讓這樣的動畫更流暢？

Answer 1

will-change CSS 屬性向瀏覽器提示一個元素將如何改變。

https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

 <div class="test"></div>

 .test { width: 50px; height: 50px; background: pink; transition: 2s; } .test:hover { width: 100px; height: 100px; background: yellow; will-change: transform; transform: translateX(30px); }

 <div class="test"></div>

Answer 2

我的動畫在 chrome 中不穩定（比如每秒 2 幀）。 也許是因為過去修復錯誤的痛苦經歷讓我相信它從未如此簡單 - 但我花了幾分鍾才決定在我的 iPhone 上重新啟動 Chrome。

我打開了 10 多個標簽。 一旦我關閉它們並重新啟動 Chrome，動畫就很好了。

希望這可以幫助某人感覺不那么愚蠢。