パーツ番号 02-11-02 ・ CSSのみ

フェードクロス単語切替

複数のキャッチコピーが淡くフェードしながら次々に入れ替わり続けます。WordPressのトップページでブランドメッセージを複数訴求したいときに向いています。

css

プレビュー

ソースコード

HTML

<div class="d02-11-02-wrap">
          <span class="d02-11-02-w" style="animation-delay:0s">想いを、届ける。</span>
          <span class="d02-11-02-w" style="animation-delay:2s">形に、変える。</span>
          <span class="d02-11-02-w" style="animation-delay:4s">未来へ、進む。</span>
        </div>

CSS

.d02-11-02{background:#f5f3ff}
        .d02-11-02-wrap{position:relative;height:1.7em;width:260px}
        .d02-11-02-w{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
          text-align:center;font-size:22px;font-weight:800;color:#7c3aed;opacity:0;
          animation:d1172fade 6s ease-in-out infinite}
        @keyframes d1172fade{
          0%{opacity:0;transform:translateY(6px)}
          8%{opacity:1;transform:translateY(0)}
          25%{opacity:1;transform:translateY(0)}
          33%{opacity:0;transform:translateY(-6px)}
          100%{opacity:0}
        }
        @media (prefers-reduced-motion: reduce){
          .d02-11-02-w{animation:none;opacity:0}
          .d02-11-02-w:first-child{opacity:1}
        }

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