CSSでフォーカスがテキストフィールドに乗った際に下線をアニメーションで表示する方法

Question

###前提・実現したいこと
html5の環境で、material-uiのテキストフィールドのように、
テスキストフィールドにフォーカスが乗ったときに
下線をアニメーションで表示することをcssで実現したいです。
（下記サイトのテキストフィールドと同等の動作）
http://www.material-ui.com/#/components/text-field

###発生している問題・エラーメッセージ
容易にCSSの機能で実現できるものなのか、
material-uiを使わないと実現できないものなのか
私の知識では分かりませんでした。

Answer 1

容易にCSSの機能で実現できるものなのか、

容易かどうかは主観の問題ですが、とりあえず同じ動きを下記のようにすれば作れます。（汎用性などは考慮していません）

<div><input type="text"><hr></div>

div {
	display: inline-block;
	position: relative;
}
hr {
	border-bottom: 2px solid rgb(0, 188, 212);
	bottom: -1px;
	margin: 0;
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
input:hover + hr,
input:focus + hr {
	transform: scaleX(1);
}
```**動くサンプル：**[https://jsfiddle.net/3d2aw2Ln/](https://jsfiddle.net/3d2aw2Ln/)