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

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

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

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

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

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

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

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

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

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