dziudek/dabblet.css

## dabblet.css
/**
 * Animated dots for pagination
 */

ol {
	list-style-type:none;
	padding:0;
}

ol li {
	float:left;
	width:24px;
	height:24px;
	position: relative;
	margin-left:10px;
	font: 0px/0 a; /* hide the text - we cannot use text-indent */
}

ol li:before {
	content: ".";
	position: absolute;
	left:4px;
	top:4px;
	width:16px;
	height:16px;
	background: #a00;
	border-radius: 50%;
	transition: all 0.3s linear; /* will work currently only on Firefox */
}

ol li:hover:before {
	width:24px;
	height:24px;
	background:#f00;
	left:0;
	top:0;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ol>

## settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Animated dots for pagination
	*/

	ol {
	list-style-type:none;
	padding:0;
	}

	ol li {
	float:left;
	width:24px;
	height:24px;
	position: relative;
	margin-left:10px;
	font: 0px/0 a; /* hide the text - we cannot use text-indent */
	}

	ol li:before {
	content: ".";
	position: absolute;
	left:4px;
	top:4px;
	width:16px;
	height:16px;
	background: #a00;
	border-radius: 50%;
	transition: all 0.3s linear; /* will work currently only on Firefox */
	}

	ol li:hover:before {
	width:24px;
	height:24px;
	background:#f00;
	left:0;
	top:0;
	}
	<!-- content to be placed inside <body>…</body> -->
	<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	</ol>