我的动画在IE和边缘更慢/越野车

Question

我有一些动画，但我注意到，在IE和Edge中，我的动画比较慢，而且其中一个动画根本看不到。这在Chrome和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. 光滑度： 与CSS动画/过渡您应该始终动画不影响布局道具：transform和opacity。你可能动画像其他事情，如边距等，但线程，做的CSS动画/转换的工作是不好的道具，需要布局重新计算。所以，对于盒子阴影和其他任何变换和不透明的东西都使用JavaScript动画。

2. 非工作动画： 不正确的关键帧规则 - 关键帧声明中的动画值始终应为数字（不是像none这样的东西）。