A CodePen by Milo Vermeulen. CSS Iris - a css-only animation, combining border-style: dashed and border-radius: 50%. Works best in Chrome

index.html

<div class="holder">
  <div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

style.css

body { 
  background-color: black;
	overflow: hidden; }

/* center in window */
.holder {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -50px; }

/* every layer is simply a rounded div with thick dashed outline */
.holder > div {
	border: 60px dashed black;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute;

	/* slightly transparent fill color, for faded depth effect */
	background-color: rgba(205, 133, 63, .15);

	/* continuous clockwise rotation */
	-webkit-animation: rotateCW 24s linear 0 infinite;
	-moz-animation: rotateCW 24s linear 0 infinite;
	-ms-animation: rotateCW 24s linear 0 infinite;
	-o-animation: rotateCW 24s linear 0 infinite;
	animation: rotateCW 24s linear 0 infinite; }

/* make every other layer rotate in opposite direction */
.holder > :nth-child(odd) {
	/* -webkit-animation-direction: reverse; */ /* disabled, doesn't work on ios? */
	-webkit-animation: rotateCCW 24s linear 0 infinite;
	-moz-animation: rotateCCW 24s linear 0 infinite;
	-ms-animation: rotateCCW 24s linear 0 infinite;
	-o-animation: rotateCCW 24s linear 0 infinite;
	animation: rotateCCW 24s linear 0 infinite; }

/* make every third layer rotate slightly slower, for a bit of 
out-of-phase variation over time */
.holder > :nth-child(3n) {
	-webkit-animation-duration: 25s;
	-moz-animation-duration: 25s;
	-ms-animation-duration: 25s;
	-o-animation-duration: 25s;
	animation-duration: 25s; }

/* define size of layers, each one 50px bigger than the previous one */
.holder > :nth-child(1) { width: 50px; height: 50px; margin: -25px; }
.holder > :nth-child(2) { width: 100px; height: 100px; margin: -50px; }
.holder > :nth-child(3) { width: 150px; height: 150px; margin: -75px; }
.holder > :nth-child(4) { width: 200px; height: 200px; margin: -100px; }
.holder > :nth-child(5) { width: 250px; height: 250px; margin: -125px; }
.holder > :nth-child(6) { width: 300px; height: 300px; margin: -150px; }
.holder > :nth-child(7) { width: 350px; height: 350px; margin: -175px; }
.holder > :nth-child(8) { width: 400px; height: 400px; margin: -200px; }
.holder > :nth-child(9) { width: 450px; height: 450px; margin: -225px; }
.holder > :nth-child(10) { width: 500px; height: 500px; margin: -250px; }
.holder > :nth-child(11) { width: 550px; height: 550px; margin: -275px; }

/* simple clockwise rotation */
@-webkit-keyframes rotateCW {
  from { -webkit-transform: rotateZ(0deg); }
  to { -webkit-transform: rotateZ(360deg); }
} 
@-moz-keyframes rotateCW {
  from { -moz-transform: rotateZ(0deg); }
  to { -moz-transform: rotateZ(360deg); }
} 
@-ms-keyframes rotateCW {
  from { -ms-transform: rotateZ(0deg); }
  to { -ms-transform: rotateZ(360deg); }
} 
@-o-keyframes rotateCW {
  from { -o-transform: rotateZ(0deg); }
  to { -o-transform: rotateZ(360deg); }
} 
@keyframes rotateCW {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
} 

/* simple counter-clockwise rotation */
@-webkit-keyframes rotateCCW {
  from { -webkit-transform: rotateZ(0deg); }
  to { -webkit-transform: rotateZ(-360deg); }
} 
@-moz-keyframes rotateCCW {
  from { -moz-transform: rotateZ(0deg); }
  to { -moz-transform: rotateZ(-360deg); }
} 
@-ms-keyframes rotateCCW {
  from { -ms-transform: rotateZ(0deg); }
  to { -ms-transform: rotateZ(-360deg); }
} 
@-o-keyframes rotateCCW {
  from { -o-transform: rotateZ(0deg); }
  to { -o-transform: rotateZ(-360deg); }
} 
@keyframes rotateCCW {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(-360deg); }
}