円形ワイプ切替型スライドショー

　先稿で円形ワイプ型のギャラリーを紹介したが、今回は、スライドショーの紹介である。下に示したサンプルは、円形スライドを円形ワイプで切り替えるタイプのスライドショーである。
　別ページには、下のサンプルのスライドをクリックすると、ギャラリーの稿で示した拡大写真が表示されるサンプル２を示した。このサンプル２は、最新のIe、Firefox、Chromeでは正常表示されるが、Microsoft Edge では、拡大写真が表示されたときに二つのanimationを停止させるタイミングがずれてしまうことがわかった。私には原因がわからないので対処不能であるが、参考のため紹介しておきたい。

サンプル１（DEMO）　サンプル２は別ページにあります。

サンプル１表示用HTML

<div id="stage">
  <div id="frame">
    <div id="photos">
      <div class="pic"><img src="img9/s1.jpg"><span class="memo">チングルマ</span></div>
      <div class="pic"><img src="img9/s2.jpg"><span class="memo">コマクサ</span></div>
      <div class="pic"><img src="img9/s3.jpg"><span class="memo">イワギキョウ</span></div>
      <div class="pic"><img src="img9/s4.jpg"><span class="memo">キンポウゲ</span></div>
      <div class="pic"><img src="img9/s5.jpg"><span class="memo">コバイケイソウ</span></div>
    </div> 
    <div id="shutter">
      <div class="part1"><div class="arc1"></div></div>
	  <div class="part2"><div class="arc2"></div></div>
    </div>
  </div>
</div>

サンプル１表示用CSS

/* 表示画面 */
#stage {
	position: relative;
	width: 200px;
	height:200px;
	padding:10px;
}
/* 表示枠 */
#frame {
	width: 200px;
	height: 200px;
	position: absolute;
	top:0;
	left:0;
	overflow: hidden;
}
/*全ての写真を水平一列に格納したdiv、#photosに,
スライドショーの基本の animation を設定*/
#photos {
	position:absolute;
	top:0;
    width:1200px;
	animation: imgPassToLeft 30s infinite;
}
/*各写真の並びを水平に設定*/
.pic {
	position:relative;
	float:left;
}
.pic img {
	border-radius:50%;
}
.memo {
	display:block;
	position:absolute;
	left:53px;
	bottom:20px;
	color:#fff;
	font-weight:bold;
	background:rgba(0,0,0,0.4);
}
/* スライドの上層で開閉するシャッター */
#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;	
}
/* スライド切替animation設定 */
@keyframes imgPassToLeft {
	0%  {   left:   0%;}
	19.99%{ left:   0%;}
	20% {   left:-100%;}
	39.99%{ left:-100%;}
	40% {   left:-200%;}
	59.99%{ left:-200%;}
	60% {   left:-300%;} 
	79.99%{ left:-300%;}
	80% {   left:-400%;}
	99.99%{ 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); }
}