When focusing on a textarea, I want to animate both the Border Shadow and Border Radius. However, I encountered an issue where combining these two animations causes the Border Radius animation to not work as intended - it simply "Pops Out" without any animation. To demonstrate this problem, I've created a Fiddle.
Here is what the code looks like:
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;
}