How angularjs fade in fade out div animation working with cs

Question

see my code

var app = angular.module('myApp', ['ngAnimate']);
app.controller('MainController', function($scope) {
$scope.animate = false;
$scope.play = function() {
$scope.animate = !$scope.animate;
}
});

when animate property getting true then div is appearing with fade in effect and when animate property getting false then div is disappearing with fade out effect.

i see the code but do not understand how css is getting applied with animate property because i am new in angular and trying to learn it.
see the css

.animate-show,
.animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}

.animate-show.ng-hide-remove,
.animate-hide.ng-hide-add.ng-hide-add-active {
opacity: 0;
display: block !important;
}

.animate-hide.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
display: block !important;
}

.animate-show,
.animate-hide

is working with boolean property. there is also other css classes out there associated .animate-show and .animate-hide.

please help me to understand how css working with angular boolean property ?

thanks