EVOLUTION-MANAGER
Edit File: index-debug.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-example85-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="inputExample"> <script> angular.module('inputExample', []) .controller('ExampleController', ['$scope', function($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="ExampleController"> <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" /> </form> </body> </html>