CSS3上的GPU渲染

Question

我曾經在C++上編寫OpenGL2.1應用程序。現在我正在使用HTML5，因爲我堅信它將成爲單一的UI平臺。

我知道很多CSS3動畫/規則都可以強制到GPU。但是，它們都不允許「用戶級」計算。

我知道它不是什麼CSS設計的，但我如何使用純CSS的簡單數學動畫？我不喜歡CPU喚醒的想法。

舉個例子，簡單的任務，很容易被着色器解決了0 CPU操作： Timer on pure CSS .

但它有一個問題：它從不停止。那麼，我能夠應用簡單的條件嗎？像動畫停止時停止：'content'< attr（target）

主要用於教育目的。

Answer 1

幾個想法：

animation-iteration-count（MDN）是我能想到的最簡單的條件。

---

你也使用CSS Custom Properties（又名「CSS變量」）有一點的JS：

:root { 
    --count: 19; 
} 
.selector { 
    animation-iteration-count: var(--count); 
} 

現在JS，你只需要修改一個值和新值立即使用在許多聲明中。

---

使用JS，您可以在HTML元素上切換類，並且CSS規則將根據其選擇器規則匹配或不匹配。

---

演示：

• Update CSS Variables with JS
• Parallax 3D Button with JS controlled CSS variables

你也可以看到"Conditions" for CSS Variables和CSS locks

但是，如果你はnt可以讓事情發生或停止，除了濫用CSS或超複雜代碼的黑客/伎倆之外，那麼JavaScript和DOM事件就是要走的路。
您正在談論GPU，計算，OpenGL，以防萬一：如果您需要計算密集型JS，那麼請嘗試ServiceWorkers。他們不能修改DOM，但他們會在後臺運行一些數字。