Mes animations sont plus lentes/buggées dans IE et Edge

Question

J'ai quelques animations mais j'ai remarqué que dans IE et Edge mes animations sont plus lentes et qu'une des animations n'est pas visible du tout. C'est très bien en chrome et Firefox. L'ombre de la boîte est celle qui n'est pas visible du tout. Des idées pourquoi ce n'est pas visible et pourquoi il est plus lent (on dirait que ce n'est pas aussi lisse)?

@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. Lissé: avec des animations CSS/transitions vous devez toujours animer des accessoires qui ne touchent pas la mise en page: transform et opacity. Vous pouvez animer d'autres choses comme les marges et ainsi de suite mais le thread qui fait le travail des animations CSS/transitions n'est pas bon avec les accessoires qui nécessitent un recalcul de mise en page. Donc, pour box-shadow et tout autre chose, alors la transformation et l'opacité utilisent des animations JavaScript.

2. animations non-travail: règle de keyframe incorrecte - valeurs animables dans la déclaration de keyframes doit toujours être numérique (pas des choses comme none).