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クエリの1つでキーフレームを再定義するだけでよいと思いましたが、これは機能していないようです。なんで？（はい、適切なプレフィックスが設定されています）

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つにヒットすると、アニメーションが最初からやり直されます。アニメーションを1回だけ再生したいのですが（サイズに関係なく、後でサイズを変更しても）、それだけです。したがって、＃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

最大幅が 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-21T18:43:41.407 に答える