應用CSS3過渡到一些媒體的質疑，但不是所有

Question

我改變一個DIV與下面的CSS寬度：

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/關鍵是要轉變一個min-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; 
    } 
}