Meine Animationen sind langsamer/Buggy in IE und Edge

Question

Ich habe ein paar Animationen, aber ich habe festgestellt, dass in IE und Edge meine Animationen langsamer sind und auch eine der Animationen überhaupt nicht sichtbar ist. In Chrom und Firefox ist es in Ordnung. Der Kastenschatten ist der, der überhaupt nicht sichtbar ist. Irgendwelche Ideen, warum es nicht sichtbar ist und warum es langsamer ist (sieht aus, als ob es nicht so glatt ist)?

@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. Glätte: mit CSS-Animationen/Übergänge sollten Sie immer Requisiten animieren, das Layout nicht beeinflussen: transform und opacity. Sie könnte animieren andere Dinge wie Ränder und so aber Thread, der den Job von CSS-Animationen/Übergänge tut nicht gut mit Requisiten, die Layout-Neuberechnung erfordern. Also, für Box-Schatten und alles andere, dann Transform und Opazität verwenden Sie JavaScript-Animationen.

2. Nicht funktionierende Animationen: Falsche Keyframe-Regel - animierbare Werte in der Keyframe-Deklaration sollten immer numerisch sein (nicht wie none).