带有 CSS 动画的媒体查询

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/