CSS3でのGPUレンダリング

Question

私はC++でOpenGL2.1アプリケーションを作成していました。今私はHTML5で作業しています。なぜなら、私はそれが単一のUIプラットフォームになるという強い信念を持っているからです。

多くのCSS3アニメーション/ルールをGPUに強制することができます。しかし、それらのどれもが "ユーザーレベル"の計算を許可していません。

私はそのCSSが設計されていないことを知っていますが、純粋なCSSで単純な数学を使ってアニメーションを作成するにはどうすればよいですか？私はCPUウェイクアップの考えが嫌いです。一例として、

、簡単なタスクは、簡単に0 CPU動作とシェーダによって解決： Timer on pure CSS .

しかし、それは問題があります：それは決して停止しません。では、簡単な条件を適用することができますか？アニメーション停止時に停止する： 'コンテンツ' < attr（ターゲット）

主に教育目的です。

Answer 1

いくつかのアイデア：

animation-iteration-count（MDN）は、私は考えることができ、最も簡単な条件です。

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

今JSであなただけの単一の値を変更する必要があり、その新しい値が即座に使用されている：あなたはまた、JSのビットとCSS Custom Properties（別名「CSS変数」）を使用することができ

---

多くの宣言で。

---

JSでは、HTML要素のクラスを切り替えることができ、CSSルールはセレクタルールによって異なります。

---

デモ：

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

あなたはまた"Conditions" for CSS VariablesとCSS locks

しかし、あなたWA場合を見ることができましたハックやトリックのような悪質なCSSや複雑なコードを除いて何かを起こしたり停止したりするには、JavaScriptとDOM Eventsが必要です。
GPU、計算、OpenGLについて話しています。計算集約型JSが必要な場合は、ServiceWorkersを試してみてください。彼らはDOMを変更することはできませんが、バックグラウンドでいくつかの数値を計算して実行します。