OL lists with CSS3 animation

OL lists with CSS3 animation. Counter reset and decimal increments in css.

HTML

<ol class="rectangle-list">
			<li><a href="">List item</a></li>
			<li><a href="">List item</a></li>
			
			<li><a href="">List item</a></li>
			<li><a href="">List item</a></li>			
		</ol>

<ol class="rounded-list">
			<li><a href="">List item</a></li>
			<li><a href="">List item</a></li>
			<li><a href="">List item</a></li>
           <li><a href="">List item</a></li>
			<li><a href="">List item</a></li>			
		</ol>
    
    <ol class="flake-list">
			<li><a href="">Chamonix</a></li>
			<li><a href="">La Plagne</a></li>
			<li><a href="">Verbier</a></li>
           <li><a href="">Stowe</a></li>
			<li><a href="">Killington</a></li>			
		</ol>

CSS

/* -------------------------------------- */
body{background:#172631;margin:40px}
/* -------------------------------------- */

			ol{
				counter-reset: li;
				list-style: none;
				*list-style: decimal;
				font: 25px 'trebuchet MS', 'lucida sans';
				padding: 0;
				margin-bottom: 4em;
				text-shadow: 0 1px 0 rgba(0,0,0,.9);
			}

			ol ol{
				margin: 0 0 0 2em;
			}



ol.flake-list{
				font: 15px 'trebuchet MS', 'lucida sans';
				padding: 0;
				margin-bottom: 4em;
				text-shadow: 0 1px 0 rgba(0,0,0,.9);
			}

	ol.flake-list li { 
 /* background:url(http://andrewpougher.co.uk/clients/snotels/beta/img/flake-ico.png) 0em 0.5em no-repeat; 
  list-style: none; */
}


.flake-list a{
				position: relative;
				display: block;
				padding: .4em .4em .4em 2em;
				*padding: .4em;
				margin: .5em 0;
				background: #1f3342;
				color: #fff;
				text-decoration: none;
				-moz-border-radius: .3em;
				-webkit-border-radius: .3em;
				border-radius: .3em;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;	
			}

			.flake-list a:hover{
				background: #254359;
			}

			.flake-list a:hover:before{
				-moz-transform: rotate(360deg);
			  	-webkit-transform: rotate(360deg);
			    -moz-transform: rotate(360deg);
			    -ms-transform: rotate(360deg);
			    -o-transform: rotate(360deg);
			    transform: rotate(360deg);	
			}

			.flake-list a:before{
			    content:...