step circle

by Park Mino

HTML

<div class="circle">
  <div class="second"></div>
</div>
<br>
<div class="cat"></div>

CSS

/* circle */
.circle {
	width: 120px;
	height: 120px;
	border: 6px solid #d2c9bc;
	border-radius: 50%;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	background-color: #fff;
}
.second {
	height: 2px;
	position: absolute;
	margin-top: -1px;
	top: 50%;
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	width: 50%;
	background-color: #e45341;
	-webkit-animation: circle 60s steps(60) infinite;
	animation: circle 60s steps(60) infinite;
}
@-webkit-keyframes circle {
    from { 
    	-webkit-transform: rotate(90deg); 
    	transform: rotate(90deg);
    }
    to { 
    	-webkit-transform: rotate(450deg); 
    	transform: rotate(450deg);
    }
}

/* cat */
.cat {
  /* steps causes the animation to chunk into 12 equal pieces */
  animation: walk-cycle 1s steps(12) infinite;
  background: url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0 no-repeat; 
  height: 200px;
  width: 400px;
  margin: 100px auto 0;
}

@keyframes walk-cycle {  
  0% {background-position: 0 0; } 
  100% {background-position: 0 -2391px; } /* Must be full height of sprite or skipping will happen.*/
}