iokaravas/dabblet.css

## dabblet.css
/**
 * Quick and easy CSS3 rolling-number/slot machine?
 */
 body {
 	font-size: 700%; /* with this setup you get 1:1 em , so 1em is actually number 1 */
 }

 #counter {
    height: 1em;
    overflow: hidden;
}

.digits {
    float:left;
    list-style-type: none;
    font-size: 1em;
    line-height: 1em;
}

.digits-first {
    margin-top: -4em; /* number 4! */
}

.digits-second {
    margin-top: 0em; /* number 0! */
}

.digits-third {
    margin-top: -4em; /* number 4! */
}

.digits {
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 2.2s;
    animation-fill-mode: forwards;
}

.luckie {
    animation-name: luckie;
}

/* Animations */
@keyframes luckie {
    100% {
        margin-top: -7em;
    }
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

            <div id="counter" class="animated">
                <ul class="digits digits-first luckie"> <li> 0 <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 </ul>
                <ul class="digits digits-second luckie"> <li> 0 <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 </ul>
                <ul class="digits digits-third luckie"> <li> 0 <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 </ul>
            </div>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Quick and easy CSS3 rolling-number/slot machine?
	*/
	body {
	font-size: 700%; /* with this setup you get 1:1 em , so 1em is actually number 1 */
	}

	#counter {
	height: 1em;
	overflow: hidden;
	}

	.digits {
	float:left;
	list-style-type: none;
	font-size: 1em;
	line-height: 1em;
	}

	.digits-first {
	margin-top: -4em; /* number 4! */
	}

	.digits-second {
	margin-top: 0em; /* number 0! */
	}

	.digits-third {
	margin-top: -4em; /* number 4! */
	}

	.digits {
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-delay: 2.2s;
	animation-fill-mode: forwards;
	}

	.luckie {
	animation-name: luckie;
	}

	/* Animations */
	@keyframes luckie {
	100% {
	margin-top: -7em;
	}
	}
	<!-- content to be placed inside <body>…</body> -->

	<div id="counter" class="animated">
	<ul class="digits digits-first luckie"> <li> 0 <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 </ul>
	<ul class="digits digits-second luckie"> <li> 0 <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 </ul>
	<ul class="digits digits-third luckie"> <li> 0 <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 </ul>
	</div>