未在IE和邊緣觸發CSS動畫

我的CSS動畫未正確觸發：不透明度是動畫效果，但不是翻譯效果。未在IE和邊緣觸發CSS動畫

看看：https://jsfiddle.net/bLxb8k3s/

顯然，這是因爲IE和邊緣不能在translateY和translate間動畫。

我做了一個測試，我代替我translate(0, 0)通過translateY(0)：https://jsfiddle.net/gy129xyw/1/

和它的作品。

但我想讓我的關鍵幀保持原樣（使用translate(0,0)），因爲我在其他頁面中使用了很多動畫。

你以爲我錯過了什麼，或者確實是IE和Edge的bug？

謝謝！

來源

2017-05-17 Quentin D

看起來就像是一個錯誤。我沒有100％的確認，但即使使用'-ms'或'-webkit'也不行。 – Emonadeo

那麼，爲什麼不改變'transform：translateY（100％）;'到'transform：translate（0，100％）;'...我的意思是說無論如何，你不能使用2個不同的關鍵幀動畫相同的屬性 – LGSon

這裏是一個在IE/Edge中工作得很好的示例：https：//jsfiddle.net/LGSon/bLxb8k3s/3/ – LGSon

我認爲在translate（％，％）中使用百分比存在問題。我試圖將其更改爲固定px，並且可以正常工作。也不要忘了前綴

https://jsfiddle.net/bLxb8k3s/1/

span { 
    display: block; 
    position: relative; 
    transform: translateY(200px); 
    -webkit-transform: translateY(200px); 
    -ms-transform: translateY(200px); 
    animation: slideIn .7s .7s both; 
}

來源

2017-05-17 09:44:46

未在IE和邊緣觸發CSS動畫

回答

相關問題