带有 CSS 动画的媒体查询

Posted 2023-03-06

【中文标题】带有 CSS 动画的媒体查询

【英文标题】：Media queries with CSS animations

【发布时间】：2012-01-01 15:26:53

【问题描述】：

我在这里尝试了一些繁重的 CSS3 内容，并遇到了一些我希望可以解决的问题：

1 - 我有一个在您加载页面时会滑入的框。比方说：

#box 
    animation-duration: 3.5s;  
    animation-name: slidein;


@keyframes slidein   from  top: 0;   to  top: 100%; 

但是，在我的媒体查询中，由于一些调整大小，我需要将其修改为：

@media only screen and (min-width: 768px) 
    @keyframes slidein   from  top: 0;   to  top: 80%; 

我认为我可以保持动画名称不变，并在 @media 查询之一中重新定义关键帧，但这似乎不起作用。为什么？ （是的，我设置了正确的前缀）

2 - 我的解决方案是为每种尺寸定义不同的动画：

#box 
    animation-duration: 3.5s;  
    animation-name: slidein;


@keyframes slidein   from  top: 0;   to  top: 100%; 
@keyframes slidein-low   from  top: 0;   to  top: 80%; 

@media only screen and (min-width: 768px) 
    #box  
        animation-name: slidein-low;
   

但是，现在在调整网站大小后，动画将在遇到其中一个媒体查询后重新开始。我只希望动画播放一次（无论大小如何，甚至之后调整大小），就是这样。所以除非有#1的解决方案，否则我相信这是因为当检测到查询时，它有点“重新启动”它的CSS？

【参考方案1】：

我假设您正在为可能具有 1024 最大宽度的较小屏幕执行最小宽度？因此，也许也可以尝试将其放入：

@media only screen and (min-width: 768px) and (max-width:1024px) 
    #box  
        animation-name: slidein-low;
   

甚至可以尝试将动画构造也放入查询中：

@media only screen and (min-width: 768px) and (max-width:1024px) 

    @keyframes slidein-low   from  top: 0;   to  top: 80%; 

    #box  
        animation-name: slidein-low;
   

我确定您已经访问过此网站，但以防万一您还没有，这里有一个很好的媒体查询参考：

http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

【参考方案2】：

从我的实验中，我发现 Safari 5（适用于桌面和 ios）肯定会以您希望使用任一解决方案的方式呈现您的页面。另一方面，如果将 @-moz-keyframe 或 -moz-animation 规则放在 @media 块中，Firefox 9 似乎不尊重它们（并且都忽略了 W3C @keyframe 和非供应商特定的动画属性）