CSS3 : 画像のワイプ表示

文字列のワイプ表示 を画像も対応した形です。

See the Pen Wipe in image by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

3つ目だけ文字列もワイプさせてますが、ちょっとクドい。

HTML

画像部分についてのみ紹介しますが、文字の時と変わらずwipeinクラスを付与するのみ。

<figure class="wipein"><img src="***">
<figure class="wipein show"><img src="***">

マークアップのお作法というのもありますが、CSSの適用しやすさ的にも<img>は<figure>で囲っておくと便利です。

CSS

文字列のワイプ表示に、画像に対応するため以下を加えています。

.wipein img {
  opacity: 0;
}

.wipein.show img {
  animation: wipeimg 0.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
}

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

文字列の時はcolor: transparentで透明化していましたが、画像には効かないのでopacityの透明度でコントロールしています。

最初はopacity: 0で透明にしておき、wipeinにshowが付与されたらwipeimgアニメーションを着火し、表示させるという動きです。

補足

画像を非同期読み込みしているわけではないので、これ単体でLazy Loadのようなパフォーマンス改善の効果はありません。

しかしLazy Loadと併せて使えば、非同期読み込みした時に不自然にパッと出てしまうのを、アニメーションで滑らかな表示にできます。