Webkit CSS動畫填充模式似乎可以覆蓋CSS媒體查詢

Question

我有一些元素同時具有CSS變換和動畫。似乎通過使用animation-fill-mode（其保持最終動畫），否將發生隨後的樣式變化（來自媒體查詢）。我建立了an example codepen here。

加載頁面> 1000px寬，然後加載後將其拖動到小於1000px寬。 Firefox應用CSS轉換（rotate(20deg)），但Webkit（Safari和Chrome）不支持。我知道animation-fill-mode保留最終的動畫風格，但它似乎覆蓋了所有未來的媒體查詢風格變化

如何讓Webkit顯示窗口大小變化小於1000px寬的屬性？

Answer 1

你錯過opacity: .5後一個逗號在@media查詢

你也應該把默認的，不帶前綴animation-fill-mode和動畫後的前綴版本

-moz-animation-fill-mode: forwards; 
-webkit-animation-fill-mode: forwards; 
-o-animation-fill-mode: forwards; 
animation-fill-mode: forwards;