我的动画在IE和Edge中较慢/错误

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动画/过渡功能的线程对于需要布局重新计算的道具并不好。所以，对于box-shadow和其他任何东西，那么变换和不透明使用JavaScript动画。

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