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

Posted: 2016.02.29 / Category: HTML&CSS / Tag: CSS3, アニメーション
横並びのナビゲーションとかでマウスオーバーしたボタンだけ横に広がって、大きくなった分だけ他のボタンが狭くなるというやつです。
ちょっと説明よくわからないですが、サンプルを用意しました。
Sponsored Link
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使うとすごく簡単にできますね。