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

ストレッチモーフィング単語

テキストが横に縮んでから伸びるタイミングで次の単語へ切り替わり続けます。WordPressのキャンペーン見出しにゴムのような弾力感を演出できます。

css

プレビュー

ソースコード

HTML

<div class="d02-11-06-wrap">
          <span class="d02-11-06-w" style="animation-delay:0s">驚きを、</span>
          <span class="d02-11-06-w" style="animation-delay:2s">カタチに、</span>
          <span class="d02-11-06-w" style="animation-delay:4s">伝える。</span>
        </div>

CSS

.d02-11-06{background:#fff7ed}
        .d02-11-06-wrap{position:relative;height:1.6em;width:260px}
        .d02-11-06-w{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
          font-size:26px;font-weight:900;color:#dc2626;opacity:0;transform-origin:center;
          animation:d1176morph 6s ease-in-out infinite}
        @keyframes d1176morph{
          0%{opacity:0;transform:scaleX(.2)}
          10%{opacity:1;transform:scaleX(1.08)}
          18%{opacity:1;transform:scaleX(1)}
          25%{opacity:1;transform:scaleX(1)}
          33%{opacity:0;transform:scaleX(.2)}
          100%{opacity:0;transform:scaleX(.2)}
        }
        @media (prefers-reduced-motion: reduce){
          .d02-11-06-w{animation:none;opacity:0;transform:none}
          .d02-11-06-w:first-child{opacity:1}
        }

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