Add css3 animation to hover dropdown menu

I am creating a menu using bootstrap 3 and add this plugin for hover support.

CSS

.fhmm .dropdown a, .fhmm .dropdown-menu a {
    color:#656565;
}
.fhmm .dropdown-menu > li > a {
    padding:6px 15px;
}
.fhmm .navbar-nav > li > .dropdown-menu {
    margin-top:1px;
}
.fhmm i {
    color:#BFBFBF
}
.fhmm .dropdown-menu {
    box-shadow:none;
    border:1px solid #efefef;
    padding:0;
}
.fhmm .form-control {
    margin-top:10px;
    border:1px solid #efefef;
}
.fhmm .btn {
    margin:10px 0 20px
}
.fhmm video {
    max-width: 100%;
    height: auto;
}
.fhmm iframe, .fhmm embed, .fhmm object {
    max-width: 100%;
}
.fhmm .google-map {
    width:100%;
    border:1px solid rgba(255, 255, 255, 0.5);
    min-height:200px;
}
.fhmm div.google-map {
    background:rgba(255, 255, 255, 0.5);
    background: #ffffff;
    height: 200px;
    margin: 0 0 0px 0;
    width: 100%;
}
#googlemaps img {
    max-width:none;
}
.fhmm .dropdown-menu .withoutdesc {
    margin-top:0;
    padding:15px 20px;
    display: block;
    text-align: left;
    text-transform: none;
    width: 100%;
}
.fhmm a:hover {
    text-decoration:none
}
.fhmm .dropdown-menu .withoutdesc ul li {
    padding:3px 10px;
}
.fhmm .dropdown-menu .withoutdesc ul li:hover, .fhmm .dropdown-menu .withoutdesc ul li:focus {
    color:#262626;
    text-decoration:none;
    background-color:#f5f5f5 !important
}
.fhmm .dropdown-menu .withoutdesc li:last-child {
    border-bottom:0 solid #fff;
}
.fhmm .fhmm-content.withdesc a:after {
    color: #CFCFCF;
    content: attr(data-description);
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 0;
    margin: 10px 0 15px;
    text-transform: uppercase;
}
.fhmm .dropdown-submenu {
    position:relative;
}
.fhmm .dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:0;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.fhmm .dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.fhmm .dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.fhmm .dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.fhmm .dropdown-submenu.pull-left {
    float:none;
}
.fhmm .dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}
.fhmm p {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color:#656565;
}
.fhmm .nav, .fhmm .collapse, .fhmm .dropup, .fhmm .dropdown {
    position: static;
}
.fhmm .half {
    width: 50%;
    left: auto !important;
    right: auto !important;
}
.fhmm .container {
    position: relative;
}
.fhmm .dropdown-menu {
    left: auto;
}
.fhmm .nav.navbar-right .dropdown-menu {
    left: auto;
    right: 0;
}
.fhmm .fhmm-content {
    padding: 15px 25px;
}
.fhmm .dropdown.fhmm-fw .dropdown-menu {
    left: 0;
    right: 0;
}
.fhmm .title {
    font-size:13px;
    font-weight:bold;
    margin-top:15px;
    text-transform:uppercase;
    border-bottom:1px solid #efefef;
    padding-bottom:10px;
}
.fhmm ul {
    list-style:none;
    padding-left:0px;
}

      

        
        
        
      

    

JS:

$('.dropdown-toggle').dropdownHover().dropdown();
$(document).on('click', '.fhmm .dropdown-menu ', function (e) {
    e.stopPropagation()
})

      

        
        
        
      

    

This worked for me. Now I have this Bounce animate using CSS3:

 .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    @-webkit-keyframes bounceIn {
        0% {
            opacity: 0;
            -webkit-transform: scale(.3);
        }
        50% {
            opacity: 1;
            -webkit-transform: scale(1.05);
        }
        70% {
            -webkit-transform: scale(.9);
        }
        100% {
            -webkit-transform: scale(1);
        }
    }
    @keyframes bounceIn {
        0% {
            opacity: 0;
            transform: scale(.3);
        }
        50% {
            opacity: 1;
            transform: scale(1.05);
        }
        70% {
            transform: scale(.9);
        }
        100% {
            transform: scale(1);
        }
    }
    .bounceIn {
        -webkit-animation-name: bounceIn;
        animation-name: bounceIn;
    }

      

        
        
        
      

    

I need to add BounceIt animation to hover using jquery or CSS. i mean when i am in the menu the submenu is shown with the bounceIt effect.

how can i create this?

DEMO