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 应用程序中运行良好。我对这种不一致感到困惑。
最佳答案
CSS webkit 和 SVG 不能很好地协同工作。
这只是使用 animation/transform/@keyframe 引用的 CSS:
(-moz-webkit, -ms-webkit, -o-webkit, -webkit)
如果您在 fiddle 中注意到，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 文件类型代替，然后为每个创建一个 img.src 交换函数使用javascript的动画帧)
b) 删除 CSS webkit 动画并重新处理您的 svg 以使用 svg 动画自行制作动画。参见:https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform
关于javascript - CSS 加载动画在 NW.js (node-webkit) 中没有动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31542129/