像谷歌材料網站的CSS過渡動畫

Question

我試圖重新創建谷歌使用了幾個小時的這種過渡，但我真的不知道如何去做。我所說的轉換是從左到右變成2px厚度的搜索欄底部。所以：From，以2px的邊界底部有一個很好的過渡。 https://material.google.com/style/icons.html#

Answer 1

這是通過搜索標籤的:after - 僞元素來完成：

這種轉變的實時預覽上可以找到。這是它的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; 

當你專注於中，以下CSS應用：

left: 0; 
width: 100%; 
visibility: visible; 

這給了你正在尋找的「中心化」的動畫。如果需要，我可以製作小提琴以演示效果。

編輯： 有一個小提琴：https://jsfiddle.net/tf084pd1/ 下面是與「雙邊框」效果：https://jsfiddle.net/tf084pd1/1/