パーツ番号 01-13-09 ・ CSSのみ

3分割シーケンシャル展開レイアウト

3つの縦パネルが順番に下から伸び上がって消える動きをループ表示する分割レイアウト。ローディング演出や事業3本柱の紹介に使えます。

autocss

プレビュー

ソースコード

HTML

<div class="d01-13-09-wrap">
          <div class="d01-13-09-panel d01-13-09-p1"><span>01</span></div>
          <div class="d01-13-09-panel d01-13-09-p2"><span>02</span></div>
          <div class="d01-13-09-panel d01-13-09-p3"><span>03</span></div>
        </div>

CSS

.prev.d01-13-09{padding:0;background:#0f172a}
        .d01-13-09-wrap{display:flex;width:100%;height:230px}
        .d01-13-09-panel{flex:1;transform:scaleY(0);transform-origin:bottom;opacity:0;display:flex;align-items:center;justify-content:center;animation:d01-13-09-rise 3.6s ease-in-out infinite}
        .d01-13-09-panel span{color:#fff;font-weight:800;font-size:22px}
        .d01-13-09-p1{background:linear-gradient(160deg,#6366f1,#4338ca);animation-delay:0s}
        .d01-13-09-p2{background:linear-gradient(160deg,#8b5cf6,#6d28d9);animation-delay:.25s}
        .d01-13-09-p3{background:linear-gradient(160deg,#a855f7,#7e22ce);animation-delay:.5s}
        @keyframes d01-13-09-rise{0%{transform:scaleY(0);opacity:0}20%,70%{transform:scaleY(1);opacity:1}92%,100%{transform:scaleY(0);opacity:0}}

クラス名 .d01-13-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。