style_circle.css

@import "compass/css3";

// gradient variable
$topColor           : hsl(80, 32%, 47%);
$bottomColor        : hsl(203, 47%, 18%);

// bullet-proof gradients
@mixin gradient( $top-gradient, $bottom-gradient) {
  background: #cedce7; /* Old browsers */
  background: -moz-linear-gradient(0deg, $top-gradient 0%, $bottom-gradient 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,$top-gradient), color-stop(100%,$bottom-gradient)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(0deg,  $top-gradient 0%, $bottom-gradient 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(0deg,  $top-gradient 0%, $bottom-gradient 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(0deg,  $top-gradient 0%, $bottom-gradient 100%); /* IE10+ */
  background: linear-gradient(90deg,  $top-gradient 0%, $bottom-gradient 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#849e51', endColorstr='#193445',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

// easy browser prefixes
@mixin prefix($property, $value) {
  -webkit-#{$property}: $value;
     -moz-#{$property}: $value;
      -ms-#{$property}: $value;
       -o-#{$property}: $value;
          #{$property}: $value;
}

// fade-in animation (should make a mixin)
@-moz-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-webkit-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

// the number of points should match the number of elements in your markup
$totalPoints: 6;

// build the circle
@for $i from 1 through $totalPoints {
  // circle radius
  $radius: 130;
  // center x coordinate
  $cx: 140;
  // center y coordinate
  $cy: 100;
  // animation delay because Sass interpolation weirdness
  $delay: ($i * 300) + ms;

  // set x and y coordinate of each circle
  $x: floor($cx + $radius * cos( 2 * pi() * ($i / $totalPoints))); 
  $y: floor($cy + $radius * sin( 2 * pi() * ($i / $totalPoints)));

  // prettiness
   li:nth-child( #{$i} ) {
    @include prefix(transform, translate( $x + px, $y + px));
    @include prefix(animation, fadein 1s $delay 1 normal forwards );
    @include prefix(transition, opacity 1s);
  } 
}

body {
  @include gradient($topColor, $bottomColor);
}

div {
  text-align: center;
  width: 20em;
  margin: 4em auto;
}

ul {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  li {
    @include prefix(border-radius, 40px );
    position: absolute;
    display: block;
    opacity: 0;
    width: 2em;
    height: 2em;
    background: #FFF;
  }
}