組合框陰影轉場和邊界轉換不起作用。

Question

我有一個textarea和焦點我想動畫都邊框陰影和邊框半徑，問題是如果我嘗試將這兩個邊框相結合邊框半徑動畫不起作用它只是「彈出」沒有任何動畫。我已創建Fiddle向您顯示我的問題。

代碼如下所示：

textarea{ 
display: block; 
padding-left: 3px; 
padding-right: 3px; 
border: 1px solid #e7e7e7; 
box-shadow: 0 0 3px #e7e7e7; 
background: none; 
color: #6b6b6b; 
max-width: 100%; 
} 

textarea:focus { 
outline: none; 
box-shadow: 0 0 25px #9ecaed; 
-webkit-transition: box-shadow linear 1s; 
transition: box-shadow linear 1s; 

border-color: #9ecaed; 
transition : border 500ms ease-out; 
-webkit-transition : border 500ms ease-out; 
-moz-transition : border 500ms ease-out; 
-o-transition : border 500ms ease-out;  
} 

Answer 1

CSS不工作，你會期待它的方式。

經過設置transition: box-shadow linear 1s;後，您是覆蓋它與transition : border 500ms ease-out;。您必須在同一個屬性上將它們設置爲均爲。

像這樣（Fiddle）：

textarea:focus { 
    outline: none; 
    box-shadow: 0 0 25px #9ecaed; 
    border-color: #9ecaed; 

    transition: box-shadow linear 1, border 500ms ease-out; 
    -webkit-transition: box-shadow linear 1, border 500ms ease-out; 
    -moz-transition: box-shadow linear 1, border 500ms ease-out; 
    -o-transition: box-shadow linear 1, border 500ms ease-out;  
}