私のアニメーションはIEとEdgeで遅く/バグです

Question

私はいくつかのアニメーションを持っていますが、IEとEdgeでは私のアニメーションが遅く、アニメーションの1つが全く見えません。それはクロムとFirefoxでちょうどいいです。ボックスの影は、全く見えないものです。なぜそれが目に見えないのか、それがなぜより遅いのか（それは滑らかではないように見えます）

@keyframes fadeInAndOut { 
17% { 
    opacity: 1; 
    box-shadow: 0 0 20px 23px #fff; 
} 

25% { 
    opacity: 0; 
    box-shadow: 0 0 31px 23px #fff; 
} 

92% { 
    opacity: 0; 
    box-shadow: none; 
} 
} 

Answer 1

1. 滑らかさ：transformとopacity：CSSアニメーション/あなたは常にレイアウトに影響を与えません小道具をアニメーション化する必要がありトランジションを 。 余白のような他のものをアニメーションすることはできますが、CSSアニメーション/トランジションの仕事をするスレッドは、レイアウトの再計算を必要とする小道具では良くありません。したがって、ボックスシャドウなどの場合は、変形と不透明でJavaScriptアニメーションを使用します。

2. 無効なアニメーション： キーフレームの不正な規則 - キーフレーム宣言のアニメーション可能な値は常に数値でなければなりません（noneなどではありません）。