我的動畫在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這樣的東西）。