Animation 带有CSS动画的媒体查询

我在这里尝试一些繁重的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;
   }
}

---

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

我假设您正在为可能具有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;
   }
}

我相信您已经访问过此网站，但如果您没有，这里有一个很好的媒体查询参考：

---

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