Geek Answers Handbook

CSS loading animation not animating in NW.js (node-webkit)

Here is jsfiddle with my CSS loading animation working correctly.

However, when I use the same code in my node-webkit application, the SVG path and colors are static and do not show animation.

After a little research, I tried to add

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

to my package.json file as per the solution to this problem . Unfortunately, this did not solve my problem.

I am using CSS animation for my loading screen according to the advice from the second answer in this post .

My animation is a slightly modified version of this CodePen .

Has anyone had similar issues with CSS animations in NW.js? Any reason why this animation might not work?

I used to have simple rotating CSS animations, and it worked great in my NW.js application. I am confused by this discrepancy.

+12
javascript css css-animations node-webkit
source share
1 answer

CSS webkit and SVG do not play well together.

In particular, this is just the CSS that uses the keyframe animation / transform / @ links:

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

If you notice in your violin, CSS shows:

 .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; }

Wouldn't it be nice if you could use .activity-box svg instead of .activity-box img ?

Unfortunately, this does not work, svg displayed in the browser, and not using CSS transformations of 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>

I would recommend either:

a) convert the animation to .gif .png or .jpg and not use svg (edit: .gif also does not convert, you can use the .png file instead and then create the swap function img.src for each frame of the animation using JavaScript)

b) Remove the webkit CSS animation and remake your svg for animation yourself using svg animation. see: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform

+1
source share

More articles:


All Articles