@charset "utf-8";

/*change.css*/
/*イメージ画像　３点ごとの切替*/

/*divタグにposition:relativeと2つ目以降のimgタグにposition:absoluteを指定することで重ねて配置する。
※全部のimgタグにposition:absoluteを指定するとdivタグの高さがなくなるので注意。
position指定した画像はmarginによる中央寄せが効かないのでleftで調節。
width:50%の中央寄せならleft:25%で対応。
*/
.album {
	margin: auto;
	background-color: white;
	position: relative;
}
/*[順番にキーフレームを呼び出す]
まず全部のimgタグの共通設定。
animation-nameはキーフレームでつけた名前。
animation-duration:10sでアニメーション1周を10秒間とする。
animation-iteration-count:infiniteで無限に繰り返す。
待機してる間に表示されるのを防ぐためにopacity:0も。
*/
.album img {
	width: 100%;/*100％表示*/
	animation-name: album;
	-webkit-animation-name: album;
	animation-duration: 10s;
	-webkit-animation-duration: 10s;
	animation-iteration-count: infinite;/*無限*/
	-webkit-animation-iteration-count: infinite;/*無限*/
	opacity: 0;
}
/*あとは2つ目以降の画像にanimation-delayを指定してアニメーション開始をずらしてく。
今回は1周10秒間に2つの画像を表示するから2つ目を5秒遅れてスタートさせる。
3つ目4つ目があれば同じ間隔でずらしてく。

最後に各imgからalbumキーフレームを呼び出せば完成。
*/
.album .img1 {
	display: block;
	margin: 0 auto;
}

.album .img2 {
	animation-delay:5s;
	-webkit-animation-delay:5s;
	position: absolute;
	top: 0;
	left: 0;
}
/*キーフレームの名前はalbumにしてみた。
今回は画像が2つなのでアニメーション1周を100%とすると各画像を表示する時間は50%ずつ。画像が4つなら25%。
この時間内でopacityを使って表示・非表示を切り替える。
いきなり表示じゃなくて徐々に浮き出て徐々に消える感じにしたいので12.5%と37.5%も指定してみた。
非表示で開始して徐々に浮き出る→12.5%時点から37.5%時点は完全に見えてる状態が続く→徐々に消えて50%時点でまた非表示。
*/
@keyframes album {
	0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

@-webkit-keyframes album {
	0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}
/*[CSSまとめ]
いろんなブラウザに対応する場合、対応したいベンダープレフィックスも用意する。
animation-name、animation-duration、animation-iteration-count、animation-delayは頭につけるだけ。
-webkit-animation-name、-webkit-animation-durationみたいな。
@keyframesだけ@の後ろなのに注意。
-webkit-@keyframesは間違い。@-webkit-keyframesになる。
*/