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 过渡来动画宽度从 300 到 500 和从 500 到 300 的变化，而不用动画从 100 到 300 和从 300 到 100 的变化？

JSFiddle

Answer 1

您可以将过渡放在最后一个媒体查询http://jsfiddle.net/T7A5v/1/

编辑：我明白你的意思，你可以试试这个：http: //jsfiddle.net/T7A5v/2/诀窍是转换 amin-width而不是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;
    }
}