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

縦スライド単語スイッチャー

単語が下から滑り込み、上へ抜けるように切り替わり続けます。WordPressの実績・強みリストをコンパクトな1行で回転表示するのに便利です。

css3d

プレビュー

ソースコード

HTML

<div class="d02-11-03-wrap">
          <span class="d02-11-03-w" style="animation-delay:0s">スピード対応</span>
          <span class="d02-11-03-w" style="animation-delay:2s">高品質デザイン</span>
          <span class="d02-11-03-w" style="animation-delay:4s">柔軟なサポート</span>
        </div>

CSS

.d02-11-03{background:#ecfdf5}
        .d02-11-03-wrap{position:relative;height:1.8em;width:260px;overflow:hidden}
        .d02-11-03-w{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
          font-size:21px;font-weight:800;color:#0f766e;opacity:0;
          animation:d1173slide 6s cubic-bezier(.65,0,.35,1) infinite}
        @keyframes d1173slide{
          0%{opacity:0;transform:translateY(100%)}
          8%{opacity:1;transform:translateY(0)}
          25%{opacity:1;transform:translateY(0)}
          33%{opacity:0;transform:translateY(-100%)}
          100%{opacity:0;transform:translateY(-100%)}
        }
        @media (prefers-reduced-motion: reduce){
          .d02-11-03-w{animation:none;opacity:0;transform:none}
          .d02-11-03-w:first-child{opacity:1}
        }

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