Experimenting with nth-child, a SASS loop & animating objects on a circular path. No classes.

index.html

 <ul>
  	<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
</ul>

script.js

/*
 
Much thanks to Lea Verou: http://lea.verou.me/2012/02/moving-an-element-along-a-circle/

Could be simplified if 'animation-direction: reverse' made it in to the spec.

 */

style.scss

@import "compass";
html{ 
  height: 100%; 
  position: relative;
  background: #000; 
}

ul, li{
  position: absolute;
  top: 50%;
  left: 50%;
}

ul{
  width: 400px;
  height: 400px;
  margin: -200px 0 0 -200px;
  list-style: none;
  animation: breathe 10s infinite ease both;
}

li{
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 20px;
	box-shadow: inset 0px 0px 5px rgb(100, 230, 255),
              0px 0px 2px rgba(255, 255, 255, 0.5),
				      0px 0px 10px rgb(0, 191, 243);
	background: rgb(0, 191, 243);
  opacity: 0.60;
	animation-name: clockwise;
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

li:nth-child(even){ 
  animation-name: counterclockwise; 
}

li:nth-child(3n+3){
  animation-duration: 40s; 
  opacity: 0.80;
}

li:nth-child(4n+4){ 
  animation-duration: 30s; 
  opacity: 0.40;
}

@for $item from 1 through 40{
  li:nth-child(#{$item}){ 
    animation-delay: -#{$item}s; 
  }
} 

@keyframes breathe{
	0%	{ transform: scale(0.75); }
	50%	{ transform: scale(1.25); }
	100%{ transform: scale(0.75); }
}

@keyframes clockwise{
	0% 	{ 
        transform: rotate(0deg) 
                   translate(-100px)
                   rotate(0deg); 
  }
  
	100%{ 
        transform: rotate(360deg) 
                   translate(-100px) 
                   rotate(-360deg); 
  }
}

@keyframes counterclockwise{
	0% 	{ 
        transform: rotate(360deg) 
                   translate(-100px) 
                   rotate(-360deg);
  }
  
	100%{ 
        transform: rotate(0deg) 
                   translate(-100px) 
                   rotate(0deg); 
  }
}