닫기시 애니메이션 부트 스트랩 메뉴

Question

열었을 때 내 부트 스트랩 탐색을 애니메이션으로 만들 수 있었지만 닫을 때 어떻게 애니메이션으로 만들 수 있습니까?

나는 순수한 CSS3 방식으로 노력하고 있습니다 ... 그것은 주로 미학을위한 것이므로 오래된 브라우저에서 작동하는 것이 걱정되지 않습니다.

이

<nav class="navbar navbar-default navbar-static-top" role="navigation"> 
    <div class="container"> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
         Menu 1 
         <b class="caret"></b> 
        </a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Option 1</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
         Menu 2 
         <b class="caret"></b> 
        </a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Option 2</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

CSS :

.open > .dropdown-menu { 
    -webkit-animation-name: bounce-in; 
} 

.dropdown-menu { 
    -webkit-animation-duration: .5s; 
    -webkit-animation-fill-mode: forwards; 
} 

@-webkit-keyframes bounce-in 
{ 
    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); 
    } 
} 

@-webkit-keyframes bounceOut { 
    0% { 
     -webkit-transform: scale(1); 
    } 
    25% { 
     -webkit-transform: scale(.95); 
    } 
    50% { 
     opacity: 1; 
     -webkit-transform: scale(1.1); 
    } 
    100% { 
     opacity: 0; 
     -webkit-transform: scale(.3); 
    } 
} 

Answer 1

.open > .dropdown-menu { 
    -webkit-transform: scale(1, 1); 
    transform: scale(1, 1); 
    opacity:1; 
} 

.dropdown-menu { 
    opacity:.3; 
    -webkit-transform-origin: top; 
    transform-origin: top; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
    -webkit-transform: scale(1, 0); 
    display: block; 
    transition: all 0.2s linear; 
    -webkit-transition: all 0.2s linear; 
} 

예 http://jsfiddle.net/52VtD/9358/