AngularJS ngMessage and ngMessages animation example.

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <title>ngMessages animation</title>
  <link href="style.css" rel="stylesheet" />
</head>

<body>
  <div>
    <form name="messageAnimationForm">
      <label for="modelSample">Password validation input</label>
      <div>
        <input ng-model="ngModelSample" id="modelSample" name="modelSample" type="password" ng-pattern="/^\d+$/" ng-minlength="5" ng-maxlength="10" required class="ngMessageSample" />
        <div ng-messages="messageAnimationForm.modelSample.$error" class="ngMessagesClass" ng-messages-multiple>
          <div ng-message="pattern" class="ngMessageClass">* This field is invalid, only numbers are allowed</div>
          <div ng-message="minlength" class="ngMessageClass">* It's mandatory at least 5 characters</div>
          <div ng-message="maxlength" class="ngMessageClass">* It's mandatory at most 10 characters</div>
        </div>
      </div>
    </form>
  </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 src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-messages.min.js"></script>
<script src="script.js"></script>
</body>

</html>

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

.ngMessagesClass {
    height: 50px;
    width: 350px;
}

.ngMessagesClass.ng-active-add {
    transition: 0.3s linear all;
    background-color: red;
}

.ngMessagesClass.ng-active {
    background-color: red;
}

.ngMessagesClass.ng-inactive-add {
    transition: 0.3s linear all;
    background-color: white;
}

.ngMessagesClass.ng-inactive {
    background-color: white;
}

.ngMessageClass {
    color: white;
}

.ngMessageClass.ng-enter {
    transition: 0.3s linear all;
    color: transparent;
}

.ngMessageClass.ng-enter-active {
    color: white;
}

.ngMessageClass.ng-leave {
    transition: 0.3s linear all;
    color: white;
}

.ngMessageClass.ng-leave-active {
    color: transparent;
}

For the ngMessages directive, that is, the container of the ngMessage directives, we
included an animation on ng-active-add that changes the container background
color from white to red and ng-inactive-add that does the opposite, changing the
background color from red to white.