angular ng-hide with animate.css strange behavior

Question

this example works fine until I click fast and multiple times on the check box. Then I can't hide the rectangle anymore. The animation completes fine, the rectangle fades out, then it becomes visible again when it should be hidden. Any idea why?

http://jsfiddle.net/sqDxL/2/

<div ng-controller="MyCtrl">
    <label><input type="checkbox" ng-model="hide" />hide</label> <br />
    {{hide}}<br />
   <div class="fade-in square" ng-hide="hide">&nbsp;</div>
</div>

// css
    .fade-in.ng-hide-remove { -webkit-animation:fadeIn 1s; animation:fadeIn 1s; }
    .fade-in.ng-hide-add{ -webkit-animation:fadeOut 1s; animation:fadeOut 1s;}
    .square {background: darkgreen; height: 200px; width:300px; }

// js
    var myApp = angular.module('myApp',['ngAnimate']);
    myApp.controller('MyCtrl', function($scope) {
        $scope.anim = 'fade-in';
        $scope.hide = false;
    });

Answer 1

I solved it. I had to add:

.ng-hide {
    display:none!important;
}

and change

.fade-in.ng-hide-add { -webkit-animation:fadeOut 1s; animation:fadeOut 1s; display:block!important;}

to

.fade-in.ng-hide-add-active { -webkit-animation:fadeOut 1s; animation:fadeOut 1s; display:block!important;}

http://jsfiddle.net/sqDxL/4/