Webkit CSS动画填充模式似乎覆盖CSS媒体查询

Question

我有一些具有CSS转换和动画的元素。看来，通过使用animation-fill-mode（维护最终动画）， no 随后的样式更改（来自媒体查询）。

我在这里创建了一个示例Codepen。

加载页面> 1000px宽，然后加载后将其拖动到小于1000px宽。Firefox应用CSS变换（rotate(20deg)），但Webkit（Safari和Chrome）却没有。我知道animation-fill-mode维护了最终的动画样式，但是它似乎覆盖了所有未来的媒体查询样式更改

如何使WebKit显示窗口大小上的属性更改小于1000px？

Answer 1

您在 @media query

中丢失了opacity: .5之后的逗号

您还应该放置默认的，非预装的animation-fill-mode和动画前缀版本

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