CSS3のアニメーションが機能しないFirefox

Question

私は3つのdivを使用してアニメーション効果を作成するためにanime.jsライブラリを使用しています。このアニメーションはクロム、オペラ、エッジで正しく機能します。私はCSSで異なるベンダープレフィックスを試して、キーフレーム付きの純粋なCSSソリューションを使用しましたが、結果は同じです。アニメーションを加速するハードウェアも試しましたが、パフォーマンスにはほとんど影響しません。

問題は、ボックスシャドウとグラデーションスタイリングを持つdivを拡大縮小することです。 Mozillaでロックされていないのに、この同じパルス/波の効果を作成する方法はありますか？

var circleAnimation = anime({ 
    targets: '.pulse', 
    delay: function(el, index) { 
    return index * 500; 
    }, 
    scale: { 
    value: 12, 
    duration: 5000, 
    easing: 'easeOutCubic', 
    }, 
    opacity: { 
    value: 0, 
    easing: 'easeOutCubic', 
    duration: 4500, 
    }, 
    loop: true 
}); 

JSフィドル： https://jsfiddle.net/hzx3jkhq/1/

おかげ

Answer 1

私はあなたのコードのペンを試してみましたが、ちょうどCSSを使用してこの効果を作成するための別の方法があることを認識しています。実際に私がやろうとしていることの1つは、CSSプリプロセッサーで作業するか、CSSキーフレームアニメーションで試してみることです。そうすれば、JavaScriptやJSライブラリーにはあまり依存しません。

私はあなたのコードペンで、ライブラリがJavaScriptで入力した効果を得るために2つのプロパティを調整していたこと、0.3から0の不透明度、transform：（scale（））から1（通常の要素サイズ）から12までです。要素を調べるだけでそれがわかりました。だから私は、CSSに行って、あなたのコードにこれを追加しました：

.expandAnimation{ 
    animation: expanding-opacity 4s infinite; 
} 

/* Expand */ 

@-moz-keyframes expanding-opacity { 
    from { -moz-transform: scale(1);opacity:0.2; } 
    to { -moz-transform: scale(12); opacity:0;} 
} 
@-webkit-keyframes expanding-opacity { 
    from { -webkit-transform: scale(1);opacity:0.2; } 
    to { -webkit-transform: scale(12); opacity:0;} 
} 
@keyframes expanding-opacity { 
    from {transform:scale(1);opacity:0.2;} 
    to {transform:scale(12);opacity:0;} 
} 

のJavaScriptライブラリーそれはそのコードの周りのどこかにmozillaの接頭辞を欠いているため、ライブラリが行くので、Firefoxで動作しているされていない理由anime.jsをコードでCSSを変更すると、純粋にJavaScriptでそれを行ういくつかのテクニックがありますが、それはライブラリのソースコードから行う必要があります。

はまた、私はちょうど、ある時点でそのクラスを操作するためのjQueryのこの作品を追加しました：また、あなたはそれを止める、あるいは簡単にCSSの値を変更したい時はいつでもアニメーションを停止するに役立つ可能性が

$('.pulse').each(function(i,element){    
    setTimeout(function() {    
     $(element).addClass('expandAnimation');   
    }, i * 500);    
}); 

。これはあなたを助けることができるようになります

希望、

レオ。