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
Post a Comment