How to make text change color after x amount of time

I currently have a timer that works but i have a css question. Basicly what i want is for when the timer reaches say 30 second, have the the numbers turn red. here is my code

$(function () {
var $startTimer = $('#startTimer');
var $timerDisplay = $('#timerDisplay');
var time = 120;

$timerDisplay.hide();

$startTimer.click(function () {
$startTimer.prop('disabled', true);
$timerDisplay.show();
var timeRemaining = time;
 var intervalId = setInterval(function () {
 var timeStamp = Math.floor(timeRemaining/60) + ':' +    timeRemaining%60;
   $timerDisplay.text(timeStamp);
     if (timeRemaining === 0) {
     clearInterval(intervalId);
    $timerDisplay.fadeOut();
    alert('Time is up, please submit a vote :)');
    $startTimer.prop('disabled', false);
    } else {
    timeRemaining--;
  }
}, 1000);
});
});

html

 <div id="timerDisplay"></div>
 <button id="startTimer">Start Timer</button>

here is a working code pen of the timer but not the color change http://ift.tt/1D9WTrf