5

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

4

2 回答 2

0

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

于 2012-01-31T15:58:10.420 回答
0

I'm assuming you're doing the min-width for smaller screens that could possibly have a max width of 1024? So maybe try putting that in as well:

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

Maybe even try putting the animation construct in the query as well:

@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;
   }
}

I'm sure you've come across this site but just in case you haven't here's a nice reference for media queries:

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

于 2011-11-21T18:43:41.407 回答