相同元素的延遲和延遲？

Question

HTML代碼

<select name="server" id="server" class="nofocus"> 
    <option value="X">X</option> 
    <option value="XX">XXE</option> 
    <option value="XXX">XXX</option> 
    </select> 

CSS代碼

#server { 
border: solid 1px #eeeeee; 
    padding: .2em .25em .15em; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    } 

#server:focus { background: rgba(0, 34, 255, 0.2); 
       transition-delay:0.5s; 
} 

.nofocus:focus { color:#FFF00; } 

所以我想要做的是有一些造型「開始」以延遲和一些造型儘快元素集中啓動。 它只顯示#server和#server：焦點代碼。

Answer 1

您應指定屬性，你要過渡到應用，所以其他屬性（像color）不受影響。

#server:focus { 
    background: rgba(0, 34, 255, 0.2); 
    transition:background; 
    transition-delay:0.5s; 
} 

另外，你指定的顏色（#FFF00）是不正確的（只有5個十六進制數字，而不是3或6）

演示在http://jsfiddle.net/yLSXc/1/

Answer 2

您可以使用轉換速記來指定以不同方式轉換樣式。

#server { 
transition: height 1s 1s, opacity 1s; 
} 

當給出兩個值，第一個值是延遲，二是持續時間

此處瞭解詳情： https://developer.mozilla.org/en-US/docs/Web/CSS/transition