A simple example of using ng-class to animate through a set of styles

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS ngClass sample</title>
</head>
<body>
    <link href="ngClassSample.css" rel="stylesheet" />
    <div ng-controller="MyApp as ma">
        <h1>ngClass Animation: {{ma.getAnimationClass()}}</h1>
        <div>
            <button ng-click="ma.doToggle()">Next !</button>
            <div class="base-class" ng-class="ma.getAnimationClass()">
                This is the 'ugly sweater' of css animations
            </div>
        </div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
    <script>
        var app = angular.module('myApp', ['ngAnimate']);
        app.controller('MyApp', [function(){
            var self = this;
            var classArray = ['', 'blackBackground', 'whiteBackground', 'greenBackground', 'blueBackground', 'redBackground'];
            self.toggle = 0;
            self.doToggle = function(){
                self.toggle++;
            }
            self.getAnimationClass = function(){
                var index = self.toggle%classArray.length;
                return classArray[index];
            }
        }]);
    </script>
</body>
</html>

.base-class {
    width: 200px;
    height: 50px;
    text-align: center;
    margin: 10px;
    padding: 10px;
    -webkit-transition: all 1s;
    transition: all 1s;
    /***
    -webkit-transition: background-color 1s, color 1s, border-color 1s;
    transition: background-color 1s, color 1s, border-color 1s;
    **/
}

.base-class.whiteBackground {
    background-color: white;
    color: black;
    border: 3px solid black;
    margin: 100px;
    padding: 10px;
}
/* This is the blackBackground, that is added or removed by the ngClass expression*/
.base-class.blackBackground {
    background-color: black;
    color: white;
    border: 3px solid white;
    margin: 10px;
    padding: 100px;
}
.base-class.greenBackground {
    background-color: green;
    color: yellow;
    border: 3px solid yellow;
    margin: 100px;
    padding: 100px;
}
.base-class.blueBackground {
    background-color: blue;
    color: magenta;
    border: 3px solid magenta;
}
.base-class.redBackground {
    background-color: red;
    color: cyan;
    border: 3px solid cyan;
}