Jquery 向引导导航栏添加其他动画

所以我有一个引导导航栏，我点击它，它会为菜单的下拉菜单设置动画 我想做的是，一旦它完全扩展，我想添加一种反弹效果，它继续“下降”10px，然后再回到10px

一般来说，我对使用bootstrap还不熟悉，所以如果有人回答了这个问题，我很抱歉，我确实先做了大量的网络搜索

我想知道是否有一个BS 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>

感谢杰拉德让我走上正轨。 最后，我在CSS中使用了以下内容：

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