本サンプル表示用HTML

<div id="stage">
  <input id="r1" type="radio" name="thumbs" />
  <input id="r2" type="radio" name="thumbs" />
  <input id="r3" type="radio" name="thumbs" />
  <input id="r4" type="radio" name="thumbs" />
  <input id="r5" type="radio" name="thumbs" />
  <input id="r11" type="radio" name="thumbs" /> 
  <label for="r11" class="close"><span>×</span></label>
  <div id="frame">
    <div id="photos">
      <label for="r1"><div class="pic"><img src="img9/s1.jpg"></div></label>
      <label for="r2"><div class="pic"><img src="img9/s2.jpg"></div></label>
      <label for="r3"><div class="pic"><img src="img9/s3.jpg"></div></label>
      <label for="r4"><div class="pic"><img src="img9/s4.jpg"></div></label>
      <label for="r5"><div class="pic"><img src="img9/s5.jpg"></div></label>
    </div> 
    <div id="shutter">
      <div class="part1"><div class="arc1"></div></div>
	  <div class="part2"><div class="arc2"></div></div>
    </div>
  </div>
<div id="pic1" class="photo"><img src="img9/1.jpg"></div>
<div id="pic2" class="photo"><img src="img9/2.jpg"></div>
<div id="pic3" class="photo"><img src="img9/3.jpg"></div>
<div id="pic4" class="photo"><img src="img9/4.jpg"></div>
<div id="pic5" class="photo"><img src="img9/5.jpg"></div>
</div>

本サンプル表示用CSS

/* 表示画面 */
#stage {
	position: relative;
	width: 640px;
	height:410px;
	margin: 0 auto;
	background:#ddd;
}
/* ラジオボタンを非表示に */
#r1,#r2,#r3,#r4,#r5,#r11 {
	display:none;
}
/* 表示枠 */
#frame {
	width: 200px;
	height: 200px;
	position: absolute;
	top:0;bottom:0;
	left:0;right:0;
	margin:auto;
	overflow: hidden;
}
/*全ての写真を水平一列に格納したdiv、#photosに,
スライドショーの基本の animation を設定*/
#photos {
	position:absolute;
	top:0;
    width:1200px;
	animation: imgPassToLeft 30s infinite;
}
/*各写真の並びを水平に設定、形状を円形に*/
.pic {
	float:left;
}
.pic img {
	border-radius:50%;
}
.pic img:hover {
	cursor:pointer;
}
/* 閉じるボタン */
.close span { display:block;float:right;color:#000;font-size:32px;font-weight:bold;margin-right:5px; }
.close span:hover { cursor:pointer;color:orange; }
/* スライドの上層で開閉するシャッター */
#shutter {
	pointer-events: none;
}
/* 左右の半円 */
.part1,.part2 {
	position:absolute;
	width:100px;height:200px;
	overflow:hidden;
	background:transparent;
}
.part1 {
	top:0;left:100px;
}
.part2 {
	top:0;left:0px;
}
.arc1,.arc2 { 
	top:0;left:0;
	width:0;height:0;
	border-radius: 50%;
	border:100px solid transparent;
}
.arc1 {
	margin-left:-101px;
    border-top:100px solid #000;
    border-right:100px solid #000;
	transform:rotate(45deg);
	animation:rot1 6s linear infinite;
	animation-fill-mode: forwards;
}
.arc2 {
	margin-left:1px;
    border-bottom:100px solid #000;
    border-left:100px solid #000;
	transform:rotate(45deg);
	animation:rot2 6s linear infinite;
	animation-fill-mode: forwards;	
}
/* 写真の表示 */
.photo {
	opacity:0;
	position:absolute;
	top:5px;left:5px;
	transition:opacity 1s ease;
	pointer-events: none;
}
#r1:checked ~ #pic1 { opacity:1; z-index:200;}
#r2:checked ~ #pic2 { opacity:1; z-index:200;}
#r3:checked ~ #pic3 { opacity:1; z-index:200;}
#r4:checked ~ #pic4 { opacity:1; z-index:200;}
#r5:checked ~ #pic5 { opacity:1; z-index:200;}
/* サムネイルクリックでanimationを一時停止 */
#r1:checked ~ #frame #photos,#r2:checked ~ #frame #photos,#r3:checked ~ #frame #photos,#r4:checked ~ #frame #photos,#r5:checked ~ #frame #photos {
	animation-play-state:paused;	
}
#r1:checked ~ #frame #shutter .arc1,#r2:checked ~ #frame #shutter .arc1,#r3:checked ~ #frame #shutter .arc1,#r4:checked ~ #frame #shutter .arc1,#r5:checked ~ #frame #shutter .arc1 {
	animation-play-state:paused;
}
#r1:checked ~ #frame #shutter .arc2,#r2:checked ~ #frame #shutter .arc2,#r3:checked ~ #frame #shutter .arc2,#r4:checked ~ #frame #shutter .arc2,#r5:checked ~ #frame #shutter .arc2 {
	animation-play-state:paused;
}
/* スライド切替animation設定 */
@keyframes imgPassToLeft {
	0%  {   left:   0%;}
	19.999%{ left:   0%;}
	20% {   left:-100%;}
	39.999%{ left:-100%;}
	40% {   left:-200%;}
	59.999%{ left:-200%;}
	60% {   left:-300%;} 
	79.999%{ left:-300%;}
	80% {   left:-400%;}
	99.999%{ left:-400%;}
	100% {  left:   0%;}
}
/* 円弧のanimation */
@keyframes rot1 {
	0% { transform:rotate(45deg); }
	10% { transform:rotate(225deg); }
	95% { transform:rotate(225deg); }
	100% { transform:rotate(45deg); }
}
@keyframes rot2 {
	0% { transform:rotate(45deg); }
	10% { transform:rotate(45deg); }
	20% { transform:rotate(225deg); }
	90% { transform:rotate(225deg); }
	95% { transform:rotate(45deg); }
	100% { transform:rotate(45deg); }
}