添加額外的動畫自舉navbar

Question

所以我有一個引導navbar，我點擊它，它動畫菜單的下拉 我想要做的是一旦它完全展開，我想添加一個排序fo反彈效果在10px之前再繼續「下降」10px。

我還是一般使用bootstrap的新手，所以如果這是在某個地方回答的道歉，我確實先做了大量的網絡搜索。

我想知道是否有一個學士學位的JavaScript的東西，我可以使用諸如「顯示」模態，但我沒有找到任何東西。

在此先感謝。

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header" id="navBarLogo"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#myPage"><img alt="Piatt TaC logo" class="logo-small" src="images/piattConsultingLogo.jpg"></a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#home">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#services">Services</a></li> 
       <li><a href="#gallery">Gallery</a></li> 
       <li><a href="#pricing">Pricing</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Answer 1

感謝傑拉德讓我走上正軌。 我結束了在我的CSS中使用以下內容：

.navbar-right:after{ 
    animation: bounce 0.5s 
} 
@keyframes bounce { 
    0% { 
     padding-bottom: 0px; 
    } 
    50% { 
     padding-bottom: 30px 
    } 
    100% { 
     padding-bottom: 0px; 
    }/**/ 
}