画像がふわっと切り替わるエフェクトをCSSアニメーションで実装する

今回はCSSアニメーションを使ってふわっと画像が入れ替わるエフェクトの作り方を解説していきます。一昔前まではJavascriptなどを使わなければできなかったことでしたが、CSS3のanimationプロパティの登場によって簡単に実装できてしまいます。記述量も少なくanimationプロパティさえ理解できていれば比較的簡単に実装できますので、ぜひ自作できるようになりましょう!

今回実装する画像が入れ替わるエフェクトはこんな感じです。

実装後サンプル①




実装後サンプル②




もちろん画像の枚数や入れ替わるまでの時間の調整なども可能です!上の「実装後サンプル」はサンプル用にちょっと早めに画像が入れ替わるようにしています。

それでは、CSSでの作り方を見ていきましょう。

CSSで画像をふわっと入れ替えるエフェクトを実装してみよう

早速HTMLとCSSを見ていきましょう。まずはHTMLです。

<div class="effect-box">
	<img src="imagepath">
	<img src="imagepath">
	<img src="imagepath">
	<img src="imagepath">
</div>

HTMLはこんな感じでdivなどのブロック要素に入れ替える画像を並べるだけで大丈夫です。シンプルですね。次はCSSを見ていきましょう。

.effect-box{
	width: 450px;
	height: 260px;
	position: relative;
	overflow: hidden;
}

.effect-box img{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}

.effect-box img:nth-of-type(1){
	animation: effect 4s 3s linear infinite;
}

.effect-box img:nth-of-type(2){
	animation: effect 4s 2s linear infinite;
}

.effect-box img:nth-of-type(3){
	animation: effect 4s 1s linear infinite;
}

.effect-box img:nth-of-type(4){
	animation: effect 4s 0s linear infinite;
}

@keyframes effect{
	0%{opacity: 1;}
	20%{opacity: 1;}
	25%{opacity: 0;}
	95%{opacity: 0;}
	100%{opacity: 1;}
}

@-webkit-keyframes effect{
	0%{opacity: 1;}
	20%{opacity: 1;}
	25%{opacity: 0;}
	95%{opacity: 0;}
	100%{opacity: 1;}
}

CSSはこんな感じになります。ちなみにこちらのCSSは冒頭に上げていました「実装後サンプル①」になります。

構造としてはeffect-boxというdivの中にpositionプロパティのabsoluteを使って画像を4枚重ねてしまい、画像一枚一枚に時間差でopacityを使って画像を消したり表示させたりを繰り返しているということになります。

CSSのポイント箇所をピックアップして解説していきます。

CSS 4行目

effect-boxというクラス名のdivに画像を絶対位置指定をしたいため、effect-boxにposition:relative;をつけます。

CSS 9行目~12行目

画像4枚をまとめて絶対位置指定で左上に固定させます。

CSS 16、20、24、28行目

ポイントはanimation-delay(アニメーションの開始を遅らせるプロパティ)を0秒、1秒、2秒、3秒と1秒ずつ時間差をつけているところです。animation-duration(アニメーション一回分の時間の長さ)が4秒なので、画像4枚が均等な時間で表示されるように1秒ずつ時間を遅らせています。

CSS 32行目~36行目

animation-durationが4秒なので、25%が1秒ということになります。25%だけopacity:1;で画像を表示させ、残りの75%はopacity:0;で画像を消しておきます。4枚の画像が1秒ごとに時間差でアニメーションが始まりますので、この処理で1枚ずつが等間隔の時間で表示されるようになります。

CSS 39行目~45行目

CSS3で採用されたanimationプロパティは一部のブラウザで上手く表示されない場合もありますので、各ブラウザでもしっかり表示されるようにベンダープレフィックスという処理をします。

まとめ

今回はCSSを使って画像を入れ替えるアニメーションを実装する方法を解説しましたがいかがでしたでしょうか?

opacity以外のプロパティを使えば様々なエフェクトで画像を入れ替えることもできるので、オリジナルのアニメーションを実装してみましょう!

カテゴリーCSS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です