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

縦書き文字が波打つ揺らぎアニメーション

縦書きの一文字ずつが時間差でゆらゆらと左右に揺れ続ける演出です。和風ブランドサイトの見出しに、水面のようなやわらかい動きのアクセントを添えられます。

css

プレビュー

ソースコード

HTML

<div class="d02-12-11-wrap">
          <span class="d02-12-11-ch" style="animation-delay:0s">波</span>
          <span class="d02-12-11-ch" style="animation-delay:.1s">打</span>
          <span class="d02-12-11-ch" style="animation-delay:.2s">つ</span>
          <span class="d02-12-11-ch" style="animation-delay:.3s">言</span>
          <span class="d02-12-11-ch" style="animation-delay:.4s">葉</span>
        </div>

CSS

.prev.d02-12-11{ background:#eef4f8; }
        .d02-12-11 .d02-12-11-wrap{
          writing-mode:vertical-rl;
          text-orientation:upright;
          font-size:19px;
          font-weight:700;
          letter-spacing:.15em;
          color:#0f4c75;
        }
        .d02-12-11 .d02-12-11-ch{
          display:inline-block;
          animation:d1737wave 2.4s ease-in-out infinite;
        }
        @keyframes d1737wave{
          0%,100%{ transform:translateX(0); }
          50%{ transform:translateX(6px); }
        }
        @media (prefers-reduced-motion: reduce){
          .d02-12-11 .d02-12-11-ch{ animation:none; }
        }

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