NgAnimate CSS animation not working with ng-show & ng-hide

DEMO: http://plnkr.co/edit/cPDUWO?p=preview

I have 2 checked checkboxes and 2 widgets displayed on the page. Clicking on the checkboxes will use ng-show

and ng-hide

to hide and show the corresponding widget. Now I also want to have basic fadeIn

and fadeOut

but no luck so far :( Widgets that show / hide without any fade animation. Can you see where I am going wrong?

controller

animateApp.controller('mainController', function($scope) {
    $scope.pageClass = 'page-home';
    $scope.widget_manage_quotes = true;
    $scope.widget_manage_customer = true;
});

      

        
        
        
      

    

CSS

.reveal-animation.ng-enter {
    -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
    animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}

.reveal-animation.ng-leave {
    -webkit-animation: leave_sequence 1s linear; /* Safari/Chrome */
    animation: leave_sequence 1s linear; /* IE10+ and Future Browsers */
}

@-webkit-keyframes enter_sequence {
    0% { opacity:0; }
    100% { opacity:1; }
}

@keyframes enter_sequence {
    0% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes leave_sequence {
    0% { opacity:1; }
    100% { opacity:0; }
}

@keyframes leave_sequence {
    0% { opacity:1; }
    100% { opacity:0; }
}

      

        
        
        
      

    

Html

<ul>
    <li>
        <input
            ng-click="widget_manage_quotes = !widget_manage_quotes"
            type="checkbox" 
            name="w_manage_quotes"
            id="w_manage_quotes" 
            class="css-checkbox"
            checked />

        <label for="w_manage_quotes" class="css-label radGroupWidgetOptions">Toggle Widget 1</label>
    </li>
    <li>
        <input
            ng-click="widget_manage_customer = !widget_manage_customer"
            type="checkbox" 
            name="w_manage_customers"
            id="w_manage_customers" 
            class="css-checkbox"
            checked />

        <label for="w_manage_customers" class="css-label radGroupWidgetOptions">Toggle Widget 2</label>
    </li>
  </ul>

  <div ng-show="widget_manage_quotes" class="manage_content dash_widget reveal-anim   ation">
    <div class="widget_box box1">
      <h1>Widget 1!</h1>
    </div>
  </div>

  <div ng-show="widget_manage_customer" class="manage_content dash_widget reveal-animation">
    <div class="widget_box box2">
      <h1>Widget 2!</h1>
    </div>
  </div>