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

Question

我有一个textarea并且在焦点上我想为Border Shadow和Border Radius设置动画，问题是如果我尝试将这两者结合在一起Border Radius动画不起作用它只是“弹出”没有任何动画。我创建了一个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;    
}