「画像」ブロックを徐々に表示する方法

はじめに

「画像」ブロックを、CSSアニメーションを使って表示します。
表示方法には、画像を左右に分割して表示する方法、または上下に分割して表示する方法があります。

この記事では、この方法について説明します。

左から徐々に表示する方法

完成イメージ

実装手順

以下の手順で実装します。

ラベル
Gutenbergエディターでの設定
Gutenbergエディター

以下の手順で設定します。
1. 「画像」ブロックを選択します。
2. 高度な設定→追加CSSクラスにmy-img-wrapと入力します。

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

.my-img-wrap {
  overflow: hidden;
  position: relative;

  &::before {
    animation: my-img-wrap 4s cubic-bezier(.4, 0, .2, 1) infinite;
    background-color: #fff;
    content: '';
    inset: 0;
    position: absolute;
    z-index: 1;
  }
}

@keyframes my-img-wrap {
  100% {
    transform: translateX(100%);
  }
}