Growing and fading numbers

dabblet.css

/**
 * Growing and fading numbers
 */
* { padding: 0; margin: 0; }
html, body { height: 100%; overflow: hidden; }
.number {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% -50%);
	font-size: 5em;
}

.off {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translateY(200px) scale(0);
	transform-origin: center center;
	opacity: 0;
	transition: transform 1s ease, opacity .5s ease;
}

.on {
	transform: translateY(0px) scale(1);
	opacity: 1;
}

dabblet.html

<div class="off on"><div class="number">1</div></div>
<div class="off"><div class="number">2</div></div>
<div class="off"><div class="number">3</div></div>

dabblet.js

(function() {
	
	(function() {
		var on = document.querySelector('.on');
		var next = on;
		
		while (next === on || !next || next.nodeType !== 1) {
			next = (next && next.nextSibling) || on.parentNode.childNodes[0];
		}
		
		on.classList.remove('on');
		next.classList.add('on');
		
		return setTimeout(arguments.callee, 2000);
	})();
	
})();

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}