CSSだけで複数の画像を自動で切り替えて表示する方法 (2)

公開日:2015/01/16

明けましておめでとうございます。遅い(:3_ヽ)_
去年の10月末からぱったり途絶えた開発ブログが突然動き出すの巻。
つまりまた暇になってしまったということだ｡
去年は期待していたより売上が少なく赤字決算になってしまった。
今年は黒字にする＆会社にお金をストックするべく役員報酬を約1/4減らして臨む。
が、早速暇なのである。つらい。
この時間を利用してまたwebの勉強をしていこう。

新年一発目は去年一番アクセスの多かった記事CSSだけで複数の画像を自動で切り替えて表示する方法の応用編。
12月にこの記事について｢ワンループで２枚目の画像を表示した状態で静止したい｣て問い合わせがあった。
はじめて問い合わせフォームが動作してびっくりした( ﾟдﾟ)
その時に回答した内容をメモする。

HTML

まずはHTML。

<div class="album">
	<img class="img1" src="/img/smart_slogan.png" alt="Make your system smart.">
	<img class="img2" src="/img/smart.png" alt="Smart Limited Liability Company">
</div>

HTMLは前回と同じでOK。

CSS

CSSをこうする。

.album {
	margin: auto;
	background-color: white;
	position: relative;
}

.album img {
	width: 50%;
}

.album .img1 {
	opacity: 0;
	display: block;
	margin: 0 auto;
	animation-name: a1;
	-webkit-animation-name: a1;
	animation-duration: 10s;
	-webkit-animation-duration: 10s;
}

.album .img2 {
	opacity: 1;
	animation-name: a2;
	-webkit-animation-name: a2;
	animation-duration: 10s;
	-webkit-animation-duration: 10s;
	position: absolute;
	top: 0;
	left: 25%;
}

@keyframes a1 {
	0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

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

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

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

@keyframes a2 {
	0% {
		opacity: 0;
	}
	
	50% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes a2 {
	0% {
		opacity: 0;
	}
	
	50% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

前回はimg1とimg2を同じアニメーションalbumを、開始タイミングをずらして実行したのに対し、
今回はそれぞれ別のアニメーションa1、a2を用意して同時に開始してみた。
img1が消えるタイミングでimg2が浮き出てそのままimg2が残る。
アニメーション後にimg2が残るようにimg2のopacityを1にしておくこと。

完成

こうなる。

こんなてきとーなメモでも誰かの役に立ったのが嬉しい。
うそは書かないように気を付けよう((((；ﾟДﾟ))))