Как сделать анимацию CSS, которая анимирует вход и выход, нажав

Я немного смущен тем, как оживлять и удалять то, что я нажимаю на элемент, используя анимацию CSS.

Я могу получить анимацию в работе, но анимация по какой-то причине ничего не делает. Я заменяю имена классов, переключая различные анимации, имена прекрасно переключаются, но анимация просто не подходит.

Было бы очень признательно, если бы кто-то мог указать на мою ошибку для меня.

Извините, я знаю много кода.

Вот мой SCSS:

.animate-in .twitter, .animate-in .google-plus, .animate-in .facebook,
.animate-out .twitter, .animate-out .google-plus, .animate-out .facebook{
    @include animation-name(dropIn, fadeIn, dropShadow);
    @include animation-duration(500ms);
    @include animation-delay(0ms);
    @include animation-direction(alternate);
    @include animation-fill-mode(forwards);  

}
.animate-out .twitter, .animate-out .google-plus, .animate-out .facebook{
    @include animation-name(fadeOut);
    @include animation-duration(500ms);
    @include animation-delay(0ms);
    @include animation-play-state(play);
    @include animation-fill-mode(forwards);  
}
.animate-in .google-plus,
.animate-out .google-plus{
    @include animation-delay(150ms);
    @include animation-timing-function(cubic-bezier(0.77, 0, 0.175, 1));
}
.animate-in .facebook,
.animate-out .facebook{
    @include animation-delay(400ms);
}

И ключевые фреймы:

$dropHeight:90px;
@include keyframes(dropIn) {
    0% {
          @include transform(  translateY(-$dropHeight) rotate(-20deg) scale(2,4) );

    } 
    100% {
      @include transform( translateY(0px) rotate(0deg) scale(1,1) );
    }
}
@include keyframes(dropShadow) {
    0% {
          @include text-shadow(-$dropHeight $dropHeight 10px rgba($darkBlue,0.2));

    } 
    100% {
      @include text-shadow(0 0 1px darken($darkBlue,3%));
    }
}
@include keyframes(fadeIn) {
    from {
      opacity:0;
    } 
    to {
      opacity:1;
    }
  }
 @include keyframes(fadeOut) {
    from {
      opacity:1;
    } 
    to {
      opacity:0;
    }
  }

Я использую эту JS для переключения кнопки:

$('.navbar-toggle').on('click', function() {
  $('div.navbar-collapse.collapse').toggleClass('animate-out').toggleClass('animate-in');
});

И вот вот HTML:

<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span><span class="icon-bar">
</span><span class="icon-bar"></span>
</button>
<div class="navbar-collapse animate-out collapse" style="height: 133px;">
    <ul class="nav navbar-nav">
       <li class="facebook active"><a href="#about"> <i class="fa fa-facebook"> </i><span class="text-hide">Facebook</span></a></li>
       <li class="twitter"><a href="#"> <i class="fa fa-twitter"> </i><span class="text-hide">Twitter</span></a></li>
       <li class="google-plus"><a href="#contact"> <i class="fa fa-google-plus"> </i><span class="text-hide">Google+</span></a></li>
     </ul>
 </div>