[WordPress] CSS: ブレークポイントでのトランジションの適用

スポンサーリンク

Question

メディア クエリ ブレークポイントを少しスムーズに遷移を適用しようとしている

小さい/大きいサイズにサイズを変更して、スムーズな方法で (ないびくびく) に表示するロゴを取得し http://maginaire.concept9.ca/ に 768 px (または他のブレークポイント) の下の画面のサイズを取得するとき。しかし、私はまだトランジションを適用する前にすべての場所は少しされているロゴを得る。これは私が:

logos .project {
-moz-transition: width 0.5s ease-in-out, left 0.5s ease-in-out;
    -webkit-transition: width 0.5s ease-in-out, left 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out, left 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out, left 0.5s ease-in-out;
    transition: width 0.5s ease-in-out, left 0.5s ease-in-out;
}

かどうか、遷移なしのロゴに出頭正しく (767/768/769px) ともみましたがない運 – 私は css の終わりに読み込み: (も検証されます。

ありがとう !ダン

答え

ように、アニメーションが開始され、それ故に前蹴っている何が起こってここ @media クエリ、「ジャンプ」。順序を変更する移行が起こっています。たとえば、800 px で、アニメーションの開始しアニメーションが完了すると、ブラウザーは 768 px にリサイズ時と場所であなたのロゴは、遷移がスムーズ

があなたのための質問を持っています。これの実際の使用とは何ですか?みようと言う私の電話であなたのページを表示中、アニメーション ロゴをレンダリングを取得はありません。lil 混乱あります

http://stackoverflow.com/questions/27587627/css-applying-transitions-at-breakpoints

スポンサーリンク

Leave a Reply