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

Question

我有一个文本区域，在焦点上，我想同时为"边界阴影"one_answers"边界半径"设置动画，问题是如果我试图将这两个组合在一起，"边界半径动画"不起作用，只会在没有任何动画的情况下"弹出"。我创建了一个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;    
}