CSS3でマウスオーバーしたボタンだけ横幅をアニメーションで広げて、他は狭くするやつ（Flexbox）

See the Pen Flexbox Animetion Width by webopixel (@webopixel) on CodePen.

HTML

HTMLはシンプルなリストでマークアップしてます。

HTML

<nav id="main-nav">
	<ul>
		<li><a href="#">Green</a></li>
		<li><a href="#">Purple</a></li>
		<li><a href="#">Red</a></li>
		<li><a href="#">Blue</a></li>
	</ul>
</nav>

CSS

重要なとこだけ抜き出してみるとこれだけです。
flexで並べたらwidthをtransitionさせるだけですね。

CSS

#main-nav ul {
    display: -webkit-flex;
    display: flex;
}
#main-nav li {
    width: 100%;
    -webkit-transition: width 0.3s ease-out;
    transition: width 0.3s ease-out;
}
#main-nav li:hover {
    width: 200%;
}

昔はJSとか駆使してがんばらないといけなかったのが、CSS3のFlexbox使うとすごく簡単にできますね。