css - ナビゲーション バーの折りたたみリンクを中央に配置するときの遅延 (1 秒)

Question

CSS の問題があり、頭を悩ませることすらできません。クリックするとリンクの行が表示される、標準の折りたたまれたボタンを備えたナビゲーションバーがあります。次のように、行を引き伸ばしてリンクを中央に配置する CSS メディア クエリがあります。

http://imageshack.us/a/img89/4940/t678.png

ストレッチとセンタリングを行う CSS は次のとおりです。

/* when the navbar becomes a button, center and stretch the dropdown links */
@media (max-width: 992px) { 
  div.navbar-collapse.navbar-ex1-collapse.navbar-right.in {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }
}

残念ながら、最初に折りたたみボタンを押して行を展開すると、テキストが中央に表示されません。テキストが中央揃えになるまでに 1000 ミリ秒 (1 秒) かかります。文字通り、画面の左端から中央に移動するのを見ることができます。

これは、CSS で何か間違ったことをしていると思わせてくれます。

この問題を解決するにはどうすればよいですか?

HTML:

<!-- navbar -->
  <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <!-- navbar header -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
              <img class="img-responsive" src="assets/img/logo.png" >
            </a>
          </div>
          <!-- collapse -->
          <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Projects</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
        </div>
  </nav>
<!-- /navbar -->