使用Internet Explorer 11进行动画闪烁

Question

我试图将animate.css与ng-hide一起使用。一切都适用于Firefox和Chrome。但IE 11闪烁了。我该如何解决？

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

/ * js * /

var myApp = angular.module('myApp',['ngAnimate']);

myApp.controller('MyCtrl', function($scope) {
    $scope.anim = 'fade-in';
    $scope.hide = false;
});

/ * css * /

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

.square {background: darkgreen; height: 200px; width:300px; }

http://jsfiddle.net/ashraffayad/7MLLC/