css - CSS3 トランジションを一部のメディア クエリに適用しますが、すべてではありません

Question

次の CSS を使用して DIV の幅を変更しています。

div { width:100px; }

@media only screen and (min-width: 400px) {
    div { width:300px; }
}
@media only screen and (min-width: 600px) {
    div { width:500px; }
}

CSS トランジションを使用して、100 から 300 および 300 から 100 への変化をアニメーション化せずに、300 から 500 および 500 から 300 への幅の変化をアニメーション化することは可能ですか?

JSFiddle

Answer 1

最後のメディアクエリhttp://jsfiddle.net/T7A5v/1/にトランジションを置くことができます

編集：あなたの言いたいことはわかります。代わりにこれを試してみてください：http://jsfiddle.net/T7A5v/2/min-widthトリックは、それ自体ではなくa を移行するwidthことです。

div {
    background: red;
    width: 100px;
}

@media only screen and (min-width: 400px) {
    div {
        width: 300px;
        min-width: 300px;
        -webkit-transition: min-width 3s;
        -moz-transition: min-width 3s;
        -o-transition: min-width 3s;
        transition: min-width 3s;
    }
}

@media only screen and (min-width: 600px) {
    div {
        min-width: 500px;
        -webkit-transition: min-width 3s;
        -moz-transition: min-width 3s;
        -o-transition: min-width 3s;
        transition: min-width 3s;
    }
}