css3 - Combined Box Shadow Transition and Border Transition not working. -


i have textarea , on focus animate both border shadow , border radius, problem if try combine 2 border radius animation not work "pops out" without animation. have created fiddle show problem.

code looks this:

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 doesn't work way you're expecting to.

after setting transition: box-shadow linear 1s; overriding transition : border 500ms ease-out;. have set them both on same property.

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

Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -