媒体与CSS动画查询

我在这里尝试了一些沉重的东西，CSS3和正在运行了一些问题，我希望能及时清理：媒体与CSS动画查询

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？

来源

2011-11-18 Brian

我假设你正在做最小宽度的小屏幕，可能有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/

来源

2011-11-21 18:43:41

从我的运行实验，我发现，Safari 5的（用于台式机和iOS）将最CER只要按照您打算使用其中一种解决方案的方式来呈现您的页面。另一方面，如果Firefox 9放置在@media块中（并且忽略W3C @keyframe和非供应商特定的动画属性），则Firefox 9似乎不遵守@ -moz-keyframe或-moz-animation规则

来源

2012-01-31 15:58:10

媒体与CSS动画查询

回答

相关问题