讓CSS3無限動畫運行並離開頁面是不好的。動畫仍然無法運行？

我讀過某處，（不幸的是我找不到我的源碼），如果用戶已經加載了一個正在運行的CSS3動畫（無限參數）的HTML頁面，並且他決定離開它，瀏覽器（計算機）仍然不必要地播放動畫，因此，即使用戶離開了頁面，CPU（或加速硬件？）仍然適用於動畫。讓CSS3無限動畫運行並離開頁面是不好的。動畫仍然無法運行？

所以如果有人能回答我，我會很高興。

這是事實嗎？

如果這是真的：

是過渡也關注這個問題？
是否暫停動畫（和過渡，如果有關的話）足以避免這個問題？（我正在考慮通過onbeforeunload事件強制暫停）還是應該做另一件事？請注意，我不想使用「懸停」來啓動動畫/轉場。

PS：我還是新來的CSS，javascript和其他語言。對不起，但我的英語知識遠非頂尖...

來源

2013-07-05 iwonder

如果用戶完全離開頁面（例如導航到整個新頁面或關閉該頁面），那麼動畫不應該繼續運行。如果他們以某種方式不斷更新，那是因爲瀏覽器錯誤，因此無論如何您都不應該擔心。

但是，隱藏元素的CSS3動畫（例如display: none;）仍然會被評估，因爲它們是基於關鍵幀的，並且未來某個時候可能會有一個關鍵幀導致元素再次變爲可見。

想象一下，想要通過先隱藏盒子然後再次顯示並使其閃爍來爲盒子製作動畫。如果在隱藏方框時CSS過渡會突然變爲禁用狀態，則動畫將停止，並且該方框不會再次出現。這不是你想要的。

注意：可以完成例如分析您的網頁。在Chrome中使用開發工具（F12 - >個人資料）。雖然我沒有用它來剖析CSS3動畫，但我不確定它是否可以完成。然而，你可以看看Chrome自己的任務管理器（Shift-ESC），看看你的網站是否使用了大量的CPU。如果這是真的，那麼這表示該頁面上可能有太多動畫。

來源

2013-07-05 10:35:25

感謝您的解釋安德烈。所以我可能會誤解我讀過的書，而且這樣更好！我之所以這樣問，是因爲當我在多個25px半徑點之間調整顏色動畫時，再次加載和加載頁面以選擇我想要的更好效果時，瀏覽器（chrome）最終非常非常緩慢，幾乎凍結了說。因此，我添加了每次重新加載之前使用的暫停按鈕，似乎可以解決問題。現在你告訴我，這個問題在其他地方有其起源。謝謝！ – iwonder

我知道CSS3動畫，尤其是大型元素，目前在大多數計算機上都很慢。瀏覽器開發人員在這方面仍有很多工作要做。我實際上記得創建一個簡單的，幾乎空白的網頁，只有一個滾動背景（400x400px，平鋪）。動畫是用CSS3完成的，只有那個單一的動畫（實際上是動畫整個背景，但仍然），佔用了我CPU的20％左右。行！ –

行！在我的50個顏色變化點下面，我有一個920x150像素的動畫漸變盒。這可以解釋！ – iwonder

讓CSS3無限動畫運行並離開頁面是不好的。動畫仍然無法運行？

回答

相關問題