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

以下の手順で設定します。

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

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

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

  &::before,
  &::after {
    animation: 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    background-color: #fff;
    content: '';
    position: absolute;
    z-index: 1;
  }

  &::before {
    animation-name: my-img-wrap-before;
    inset: 0 50% 0 0;
  }

  &::after {
    animation-name: my-img-wrap-after;
    inset: 0 0 0 50%;
  }
}

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

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