CSS анимация загрузки не анимируется в NW.js (node-webkit)

Question

Вот jsfiddle с моей анимацией загрузки CSS, работающей правильно.

Однако когда я использую тот же код в своем приложении node-webkit, SVG-путь и цвета являются статическими и не показывают анимацию.

После небольшого исследования я попытался добавить

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

в мой файл package.json в соответствии с решением этой проблемы. К сожалению, это не решило мою проблему.

Я использую анимацию CSS для своего экрана загрузки согласно совету из второго ответа в этом посте.

Моя анимация - слегка измененная версия этого CodePen.

У кого-нибудь были похожие проблемы с CSS-анимацией в NW.js? Любая причина, почему эта анимация может не работать?

Раньше у меня была простая вращающаяся CSS-анимация, и она отлично работала в моем приложении NW.js. Я смущен этим несоответствием.

Answer 1

CSS webkit и SVG не очень хорошо играют вместе.

В частности, это только тот 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>

Я бы порекомендовал либо:

а) конвертировать анимацию в .gif.png или же .jpg и не использовать svg (редактировать: .gif тоже не трансформируется, вы можете использовать .png вместо этого, затем создайте img.src функция обмена для каждого кадра анимации с использованием JavaScript)

б) Удалите CSS анимацию webkit и переделайте svg оживить самостоятельно, используя svg анимации. см.: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform