css - 组合框阴影过渡和边框过渡不起作用。

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;. 您必须将它们都设置在同一属性上。

像这样（小提琴）：

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;    
}