<div id="countdown"></div>

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700italic);
body {
  background-color: black;  
}
#countdown {
  font-family: 'Roboto Condensed', sans-serif;
  width: 200px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -50px;
  color: white;
  font-size: 5em;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  .opacity(1.0);
  .transition(opacity 0.4s ease);
  /* solve for flicker problem */
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;    
} 
#countdown.puffer {
  .opacity(0);
  .transform(scale(1.6,1.6));
  .transition(all 0.4s ease-out);
}

/* LESS Mixins */
.opacity (@opacity: 0.5) {
	-webkit-opacity: 	@opacity;
	-moz-opacity: 		@opacity;
	opacity: 		@opacity;
}
.transition (@transition) {
	-webkit-transition: @transition;  
	-moz-transition:    @transition;
	-ms-transition:     @transition; 
	-o-transition:      @transition;  
}
.transform(@string){
	-webkit-transform: @string;
	-moz-transform: 	 @string;
	-ms-transform: 		 @string;
	-o-transform: 		 @string;
}

var startNum;
var currentNum;

function addClassDelayed(jqObj, c, to) {    
    setTimeout(function() { jqObj.addClass(c); }, to);
}

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0) currentNum = startNum-1; else currentNum--;
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}
      
$(function() {
  startNum = 25; 
  currentNum = startNum;
  $("#countdown").html(currentNum); // init first time based on n
  self.setInterval(function(){anim()},1325);
});