画像を右から左に徐々に表示させる

画像はその場に固定で非表示の状態で、右側から徐々に見えるようにする、みたいなアニメーションをやろうとして少し詰まったのでメモ。

サンプルコード

説明文だけだと分かりにくいので、まずは左から徐々に見えるアニメーションを試してみます。

HTML

<div id="wrap">
	<img src="image.jpg">
</div>

画像の親要素の#wrapにoverflow: hidden;を指定して、widthの値を変更することで徐々に表示するようにします。

CSS

#wrap {
	width: 0;
	height: 180px;
	overflow: hidden;
	transition: 1000ms linear;
}
#wrap.is-show {
	width: 320px;
}

#wrapのwidthの初期値を0にして、is-showというclassが付くとwidthを画像の幅になるようにしています。

ページ読み込み後にclassを付与して、アニメーションを実行します。

JavaScript

window.onload = function(){
	document.getElementById('wrap').classList.add('is-show');
}

左から右ですが、これで意図したアニメーションにはなりました。
左から右に徐々に表示するデモページ
　

右から左にする場合、position: relative;とright: 0;で右寄せの状態にするといいようです。
#wrapと画像の間に.innerを追加して、この.innerをアニメーションするようにします。

HTML

<div id="wrap">
	<div class="inner">
		<img src="image.jpg">
	</div>
</div>

アニメーションする.innerにposition: absolute;とright: 0;を設定します。
これだけだと画像が左寄せになり、.innerが左に拡張していくのに合わせて画像自体も左に動くようになってしまうので、画像にもposition: absolute;とright: 0;を設定します。

CSS

#wrap {
	position: relative;
	width: 320px;
	height: 180px;
}
.inner {
	position: absolute;
	right: 0;
	width: 0;
	height: 100%;
	overflow: hidden;
	transition: 1000ms linear;
}
#wrap img {
	position: absolute;
	right: 0;
}
#wrap.is-show .inner {
	width: 320px;
}

これで意図したアニメーションになりました。
右から左に徐々に表示するデモページ