A Modal Box Using CSS3 and AngularJS

<!DOCTYPE html>
<html ng-app="modalExampleApp">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-controller="modalCtrl">
    <div class="modal-overlay {{activeClass}}"></div>
    <div class="modal-form {{activeClass}}">
      MODAL FORM<br>
      <span ng-click="activeClass = ''" class="btn btn-success btn-sm">close modal</span>
    </div>  
    <div class="container-fluid">  
      <div class="well">  
        <h1>Modals Cha Cha Cha</h1>
        <p>This is from Code School's CSS Animations Course Video 1.8</p>
        <span ng-click="activeClass = 'active'" class="btn btn-success">open modal</span>
      </div>
    </div>
  </body>
</html>

angular.module("modalExampleApp",[]);
angular.module("modalExampleApp").controller("modalCtrl", function($scope){
  $scope.activeClass = "";
});

.modal-form{
  visibility:hidden;
  opacity:0;
  padding:10px;
  border-radius: 5px;
  position:absolute;
  top:-5px;
  background-color:#FFF;
  border:1px solid black;
  width:200px;
  text-align:center;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;  
  transition: 2s;

}
.modal-overlay{
  visibility:hidden;  
  opacity:0;
}
.modal-overlay.active{
  visibility:visible;
  opacity:.5;
  background-color:#000000;
  height:100%;
  width:100%;
  position:absolute;
}
.modal-form.active{
  visibility:visible;
  opacity:1;
  top:150px;
  transform: rotate(720deg) scale(2);
}