CSS3上的GPU渲染

Question

我曾经在C ++上编写OpenGL2.1应用程序。现在我正在使用HTML5，因为我坚信它将成为单一UI平台。

我知道很多CSS3动画/规则都可以强制使用GPU。但是，它们都不允许“用户级”计算。

我知道它不是CSS的设计目标，但是如何在纯CSS上使用简单的数学制作动画呢？我不喜欢CPU唤醒的想法。

作为一个例子，简单的任务，由具有0个CPU动作的着色器轻松解决：     Timer on pure CSS .

但它有一个问题：它永远不会停止。那么，我能应用简单的条件吗？就像动画停止时停止：'content'＆lt; ATTR（目标）

主要用于教育目的。

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

但是如果你想让某些事情发生或停止，除了黑客攻击/欺骗CSS或过度复杂的代码之外，那么JavaScript和DOM事件就是可行的方法。
你说的是GPU，计算，OpenGL，以防万一：如果你需要计算密集的JS，那么试试ServiceWorkers。他们无法修改DOM，但他们会在后台运行一些数字。