Добавить css3 анимировать в hover dropdown

Question

Я создаю меню, используя bootstrap 3, и добавьте this плагин для поддержки зависания.

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() 
}) 

Это работает для меня. Теперь у меня есть этот дребезг одушевленный с помощью 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; 
    } 

Мне нужно добавить BounceIt анимации в парении с помощью JQuery Или CSS. я имею в виду, когда я нахожусь в меню, подменю показывается с эффектом BounceIt.

как я могу это создать?

DEMO

Answer 1

Просто добавьте классы animated и bounceIn на <ul class="dropdown-menu fullwidth">