「タイムライン」ブロックを横向きに表示する方法

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

1. 「テーブル」ブロックを配置します。
2. 高度な設定→追加CSSクラスにmy-timelineと入力します。

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

@property --item {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@media (min-width: 481px) {
  @keyframes tl-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes tl-line {
    from { width: 0; }
    to   { width: 100%; }
  }

  .my-timeline {
    /* 1アイテムのアニメーション時間を設定 */
    --delay: 2s;

    > .timeline {
      display: flex;

      > .timeline-item {
        width: 100%;

        &::before {
          height: 16px;
          left: 0;
          top: 30px;
          width: 16px;
          z-index: 1;
        }

        .timeline-item-label {
          float: unset;
          padding: 0 0 30px;
          text-align: unset;
        }

        .timeline-item-content {
          border-left: unset;
          float: unset;
          padding: 0 0 0 16px;
          width: unset;
        }

        .timeline-item-snippet::after {
          background-color: #e5e5d1;
          content: '';
          height: 3px;
          position: absolute;
          top: 36px;
          width: 100%;
        }
      }
    }

    @supports (animation-trigger: --t play-forwards) {
      /* トリガーの有効範囲を設定 */
      trigger-scope: --tl;

      /* トリガー名を登録 */
      timeline-trigger-name: --tl;

      /* 画面内への進入をトリガーとして設定 */
      timeline-trigger-source: view();

      > .timeline > .timeline-item {
        /* 兄弟要素の順番からアイテム番号を取得 */
        --item: calc(sibling-index() - 1);

        opacity: 0;

        animation: tl-fade 1s ease both;
        animation-delay: calc(var(--item) * var(--delay));
        animation-trigger: --tl play-forwards;

        /* 線のアニメーションを設定 */
        .timeline-item-snippet::after {
          width: 0;

          animation: tl-line var(--delay) ease both;
          animation-delay: calc(var(--item) * var(--delay));

          /* トリガーとアニメーションを関連付け */
          animation-trigger: --tl play-forwards;
        }
      }
    }
  }
}