ボディをアニメーション化すると、ブートストラップの固定ナビゲーション

Question

私は自分のブートストラップのウェブページに固定ナビゲーションバーを持っています。しかし、いったん私のページのbody要素をアニメーション化すると、ナビゲーションバーは、ページを表示せずにスクロールします。

私は体を右から「飛ぶ」ように動かします。これは、このCSSを介して行われます。

@keyframes body-anim { 
    0% { 
     transform: translate(10rem); 
     opacity: 0; 
    } 
    25% { 
     opacity: 0; 
    } 
} 

body { 
    animation-name: body-anim; 
    animation-duration: 2s; 
    animation-fill-mode: forwards; 
    animation-timing-function: ease-in-out; 
    overflow-x: hidden; 
} 

このアニメーションは、次のようになり、私の固定されたトップナビゲーションバー破る：なぜ任意のアイデアを持っている

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> 
       <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="#"><span class="col-brand">B</span>rand</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">Example</a></li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

を？

JSFiddle：変換し、このような固定要素のCSSを使用した場合https://jsfiddle.net/DTcHh/20315/

Answer 1

これは既知の問題です。 'transform3d' not working with position: fixed children

クイックフィックスは、次のように変換を行うことであろうこの答えで
ルック：

transform: translate(10rem,0,0); 

これであなたが失うものの、そのアニメーションをスライドさせるだけフェードイン得ます。