CSS 加载动画在 NW.js (node-webkit) 中没有动画

Question

Here is a jsfiddle 我的 CSS 加载动画正常工作。

但是，当我在我的 node-webkit 应用程序中使用相同的代码时，SVG 路径和颜色是静态的并且不显示动画。

经过一番研究，我尝试添加

"chromium-args": "--enable-threaded-compositing"

根据this issue 的解决方案将其添加到我的 package.json 文件中。不幸的是，这并没有解决我的问题。

根据this post 中第二个答案的建议，我正在为加载屏幕使用 CSS 动画。

我的动画是 this CodePen 的略微改动版本。

有没有人在 NW.js 中遇到过类似的 CSS 动画问题？此动画可能无法正常工作的任何原因？

我之前只有一个简单的旋转 CSS 动画，它在我的 NW.js 应用程序中运行良好。我对这种不一致感到困惑。

Answer 1

CSS webkit 和 SVG 不能很好地结合在一起。

这只是使用动画/变换/@keyframe 引用的 CSS：

(-moz-webkit, -ms-webkit, -o-webkit, -webkit)

如果你注意到你的小提琴，CSS 会显示：

.activity-box img {
display: block;
position: absolute;
width: 40px;
height: 40px;
/* Below is the key for the rotating animation */
-webkit-animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
-o-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}

如果您可以使用.activity-box svg 而不是.activity-box img，那不是很好吗？

不幸的是，这不起作用，因为 svg 是在浏览器中呈现的，而不是 CSS webkit 转换。

<div id="flask">
<div class="background"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 113 130" xml:space="preserve">
    <g>
        <path fill="#E6E9EA" d="M0,0v130h112.084L111.75,0H0z M94.75,128C71,128,56,128,56,128s-14.873,0-38.623,0s-13.945-19.422-6.33-35.945S40,41.25,40,41.25V3h16h11v38.25c0,0,23.901,34.283,31.517,50.805S118.5,128,94.75,128z"></path>
        <path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M56,127.5c0,0-14.873,0-38.623,0s-13.695-19.172-6.08-35.695C18.912,75.283,40.5,41.25,40.5,41.25V2.5h-9H56h19.5h-8v38.75c0,0,23.651,34.033,31.267,50.555c7.615,16.523,19.733,35.695-4.017,35.695S56,127.5,56,127.5z"></path>
    </g>
</svg>
...
</div>

我会推荐：

a) 将动画转换为 .gif .png 或 .jpg 并且不使用 svg （编辑：.gif 也不转换，您可以使用 .png 文件类型，然后使用 javascript 为每个动画帧创建一个 img.src 交换函数）

b) 移除 CSS webkit 动画并重新设计您的 svg 以使用 svg 动画自行制作动画。见：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform