Jumpy transition, when it only changes the shadow of the window, looks great using the shadow frame + border

Question

The following code snippets show two examples of text input fields. When focusing, the bottom of the entrance increases in thickness and changes color.

The first example uses a combination of border-bottom and box-shadow to achieve the effect. In the second example, only the shadow is used. I think the effects should be the same. However, with a shadow shadow, only the example “jumps” when the transition is completed. What for? Is there any way to improve it?

The example is tested only on a stable version of Webkit.

input[type="text"] { border-top: none; border-left: none; border-right: none; padding: 0 0 8px 0; transition: box-shadow 0.3s, border 0.3s; will-change: box-shadow, border; outline: none; box-sizing: border-box; } #example1 { border-bottom-width: 1px; border-bottom-color: rgba(0, 0, 0, 0.26); } #example1:focus { border-bottom-color: #2196F3; box-shadow: inset 0 -1px 0 #2196F3; } #example2 { border-bottom: none; padding-bottom: 9px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .26); } #example2:focus { box-shadow: inset 0 -2px 0 #2196F3; } 

 <input type="text" id="example1" placeholder="I'm a good example"> <input type="text" id="example2" placeholder="I'm a bad example"> 

Answer 1

It looks good when I run it and I am in Chrome.

The first thing you need to do is make sure you have a modern browser: the transition was universally accepted a few releases back.

Secondly, transitions do not work perfectly on each element or even work on some.

Use this awesome tool to check out the elements you are trying to animate for compatibility:

http://caniuse.com/#feat=css-transitions

Answer 2

  input[type="text"] { border-top: none; border-left: none; border-right: none; padding: 0 0 8px 0; transition: box-shadow 0.3s, border 0.3s; will-change: box-shadow, border; outline: none; box-sizing: border-box; } #example1 { border-bottom-width: 1px; border-bottom-color: rgba(0, 0, 0, 0.26); } #example1:focus { border-bottom-color: #2196F3; box-shadow: inset 0 -1px 0 #2196F3; } #example2 { border-bottom: none; padding-bottom: 9px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .26); transition: box-shadow .1s; } #example2:focus { box-shadow: inset 0 -2px 0 #2196F3; transition: box-shadow .4s; } 

  <input type="text" id="example1" placeholder="I'm a good example"> <input type="text" id="example2" placeholder="I'm a bad example">