1.2.18/docs/examples/example-example12/index-debug.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example12-debug</title>
  

  <script src="../../../angular.js"></script>
  <script src="../../../angular-animate.js"></script>
  

  <script type="text/javascript">
    angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
  </script>
</head>
<body ng-app="">
    <script>
   function Ctrl($scope) {
     $scope.val = '1';
   }
  </script>
  <style>
    .my-input {
      -webkit-transition:all linear 0.5s;
      transition:all linear 0.5s;
      background: transparent;
    }
    .my-input.ng-invalid {
      color:white;
      background: red;
    }
  </style>
  Update input to see transitions when valid/invalid.
  Integer is a valid value.
  <form name="testForm" ng-controller="Ctrl">
    <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />
  </form>
</body>
</html>