The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

#warpper {
	width: 20px;
	height: 20px;
	text-align: center;
	padding: 5px 0px;
	box-shadow: inset 0px -5px 10px white, inset 0px 5px 10px white;
	position: relative;
	overflow: hidden;
}

#warpper #layer {
	position: absolute;
	height: 33px;;
	width: 100%;
	box-shadow: inset 0px -5px 10px white, inset 0px 5px 10px white;
	z-index: 2;
	top: -3px;
}

#inner {
	z-index: 1;
	position: absolute;
	top: -213px;
	width: 100%;
	
	animation-duration: 10s;
	animation-name: rot;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes rot {
	from { top: 3px; }
	to { top: -213px; }
}

ul {
	padding: 0px;
	margin: 0px;
}

li {
	list-style: none;
	font-family: arial;
	font-size: 20px;
}

dabblet.html

<div id="warpper">
	<div id="inner">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>0</li>
		</ul>
	</div>
	<div id="layer"></div>
</div>

settings.json

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