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

我有一个文本区域和焦点，我想动画边界阴影和边界半径，问题是如果我试图结合这两个边界半径动画不工作，它只是“弹出”没有任何动画。我已经创建了一个演示来向您展示我的问题。

代码如下所示：

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

---

CSS的工作方式与您期望的不同

设置

过渡后：框影线性1s你正在用
转换覆盖它：边界500毫秒放松。您必须在同一属性上设置它们

像这样（）：

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