Animieren body breaks bootstrap's fixed-nav

Question

Ich habe eine feste Navigationsleiste auf meiner Bootstrap-Webseite. Aber sobald ich das Body-Element meiner Seite animiere, scrollt die Navigationsleiste mit der Seite aus der Sicht.

Ich animiere den Körper, von rechts 'reinzufliegen'. Dies geschieht über diese CSS getan:

@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; 
} 

Diese Animation bricht mir das Fest Top-Navigationsleiste, die wie folgt aussieht:

<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> 

haben eine Idee, warum?

JSFiddle: https://jsfiddle.net/DTcHh/20315/

Answer 1

Dieses Problem ist bekannt, wenn wie diese CSS-Transformation und festes Element verwendet wird.
Blick auf diese Antwort 'transform3d' not working with position: fixed children

Quick Fix so sein würde zu tun übersetzen: mit diesem

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

Obwohl Sie, dass gleitende Animation verlieren und nur FadeIn.