css - 我的动画在 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 动画/过渡时，您应该始终为不影响布局的 Prop 设置动画:transform 和 opacity。您可以为其他内容设置动画，例如边距等，但是执行CSS动画/转换工作的线程对于需要重新计算布局的 Prop 来说并不好。因此，对于盒子阴影以及变换和不透明度之外的任何其他内容，请使用 JavaScript 动画。

2. 非工作动画: 关键帧规则不正确 - 关键帧声明中的可动画值应始终为数字(而不是 none 之类的值)。