Question

我正在尝试一些沉重的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？

Answer 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/

Answer 2

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

使用CSS动画进行媒体查询

2 个答案: