Nukeroni Nukeroni - 14 days ago 6
CSS Question

CSS Transition animation like Google Material site

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#

Answer

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.

EDIT: Have a fiddle: https://jsfiddle.net/tf084pd1/ Here's the effect with the "double-border": https://jsfiddle.net/tf084pd1/1/

Comments