JSFiddle - React, Tailwind, and code Playground

HTML

<form ng-controller="SampleController">
    <input type="text" ng-model="a" highlight />
    <br/>
    <input type="text" ng-model="b" highlight="highlight-blue" />
    <br/>
    <input type="text" ng-model="c" highlight />
    <br/>
    <input type="text" ng-model="d" highlight="highlight-red" />
    <br/>
    <input type="text" ng-model="e" highlight />
    <br/><span>{{a}}{{b}}{{c}}{{d}}{{e}}</span>

    <br/>
    <button ng-click="change()">Change</button>
</form>

CSS

.highlight {
    -webkit-transition: background .4s ease;
    transition: background .4s ease;
    background: coral;
}
.highlight-blue {
    -webkit-transition: background .4s ease;
    transition: background .4s ease;
    background: #AEAEEF;
}
.highlight-red {
    -webkit-transition: background .4s ease;
    transition: background .4s ease;
    background: #FE94B3;
}

JavaScript

angular.module('changeSample', [])
    .controller('SampleController', ['$scope', function ($scope) {
    $scope.a = 1;
    $scope.b = 2;
    $scope.c = 3;
    $scope.d = 4;
    $scope.e = 5;

    $scope.change = function () {
        var rand = Math.floor(Math.random()*5);
        if (rand == 0) {
            $scope.a = $scope.a+1;
        }
        if (rand == 1) {
            $scope.b = $scope.b+1;
        }
        if (rand == 2) {
            $scope.c = $scope.c+1;
        }
        if (rand == 3) {
            $scope.d = $scope.d+1;
        }
        if (rand == 4) {
            $scope.e = $scope.e+1;
        }
    };
}])

.directive('highlight', function($timeout) {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelController) {
            var className = attrs.highlight || 'highlight';
            scope.$watch(attrs.ngModel, function(newVal, oldVal) {
                if (newVal !== oldVal) {
                    element.addClass(className);
                    $timeout(function() {
                        element.removeClass(className);
                    }, 400);
                }
            });
        }
    };
});