Css 关闭时设置引导菜单的动画

我已经设法让我的引导导航在打开时设置动画，但是如何让它在关闭时设置动画呢

我想用一种纯CSS3的方式。。。它主要是为了美观，所以我不担心它在较旧的浏览器中工作

HTML:

范例

---

谢谢，但我已经看过这个例子了。我正试图找出如何使其与关键帧一起工作，以便在我提供的代码中使用动画序列…我认为您需要

transform:scale（1,0）

使其在除chrome以外的浏览器中工作。

<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>

.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); 
    } 
}

.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;
}