Generated by SassMeister.com.

SassMeister-input-HTML.html

	<div class="wrapper">
		<div class="ring"></div>
	</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

@keyframes spin {
  from {
    transform:rotateZ(0deg);
  }

  to {
     transform:rotateZ(-360deg);
  }
}

html, body{
  height:100%;
}

.wrapper{
	margin:5% auto;
	width:324px;
	height:324px;
	animation-duration: 100s;
	animation-name: spin;
	animation-iteration-count: infinite;
	animation-timing-function:linear;
}
.ring{
	position:absolute;
	top:0px;
	left:0px;
	background: url('https://scontent-a-lax.xx.fbcdn.net/hphotos-xap1/t1.0-9/p75x225/1600982_10204509632881388_3094687938608111138_n.jpg') no-repeat;
	width:324px;
	height:324px;
	animation-duration: 42s;
	animation-name: spin;
	animation-iteration-count: infinite;
	animation-timing-function:linear;
	animation-direction: reverse;
}

.one{
	top:172px;
	left:196px;
}
.two{
	top:13px;
	left:122px;
}
.three{
	top:156px;
	left:21px;
}

SassMeister-output.css

@keyframes spin {
  from {
    transform: rotateZ(0deg);
  }

  to {
    transform: rotateZ(-360deg);
  }
}
html, body {
  height: 100%;
}

.wrapper {
  margin: 5% auto;
  width: 324px;
  height: 324px;
  animation-duration: 100s;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.ring {
  position: absolute;
  top: 0px;
  left: 0px;
  background: url("https://scontent-a-lax.xx.fbcdn.net/hphotos-xap1/t1.0-9/p75x225/1600982_10204509632881388_3094687938608111138_n.jpg") no-repeat;
  width: 324px;
  height: 324px;
  animation-duration: 42s;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: reverse;
}

.one {
  top: 172px;
  left: 196px;
}

.two {
  top: 13px;
  left: 122px;
}

.three {
  top: 156px;
  left: 21px;
}

SassMeister-rendered.html

	<div class="wrapper">
		<div class="ring"></div>
	</div>