I tried to recreate this transition that google uses for a couple of hours but I really don't know how to do it yet. The transition I'm talking about is that search bar bottom that becomes 2px thick from left to right. So: From that to a border-bottom of 2px with a nice transition.
A live preview of this transition can be found on: https://material.google.com/style/icons.html#
This is done via the
:after-pseudo-element of the Search-label. This is it's CSS:
box-sizing: border-box; background-color: rgba(255, 255, 255, 0.87); bottom: 0px; content: ''; height: 2px; width: 10px; left: 45%; position: absolute; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); visibility: hidden;
When you focus the box, the following CSS is applied:
left: 0; width: 100%; visibility: visible;
This gives the "center-based" animation you're looking for. I can build a fiddle to demonstrate the effect if you need.