css - フォーカス時のブートストラップと検索入力幅の変更

Question

ブートストラップ 3 を使用してナビゲーション バーを作成しています。また、ナビゲーション バーに検索バーを配置する必要がありました。だから私のコードは次のようになります

<div class="navbar navbar-default">     
    <a class="navbar-brand">Logo Image</a>
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Calendar</a></li>
    <li><a href="#">Customerr</a></li>
    <li><a href="#">Providers</a></li>                  
    </ul>
    <form class="navbar-form navbar-right" action="">
    <div class="form-group">
        <input type="text" class="form-control mac-style" name="Search" id='nav-search' placeholder="Search">
    </div>
    <input type="submit" name="search" value="Search" class="btn btn-default" > 
    </form>
</div>

ユーザーが検索に集中したときに入力ボックスを大きくしたいのですが、スタックの検索バーのように左に移動します。最初に次のcssを試しました

.mac-style:focus{
    width: 500px;
}

入力ボックスは左に伸びますが、遷移は非常に荒いです。だから私はこのようにトランジションプロパティ（webkit moz o an default）を追加しようとしました

 .mac-style:focus{
    width: 500px;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition:width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}

しかし、入力は幅を右に変更して検索ボタンの後ろに移動し、ナビゲーションバーから外れます。トランジションなしでcssのように動作させることができますか（左に成長します）。ナビゲーション バーの作成方法ですが、最後の li に達したときに停止してより動的にする方法はありますか?