CSS

Wave Text

1文字ずつ波打つテキストアニメーション。

HTML

<div class="wave-text">
  <span style="--d:0">H</span><span style="--d:1">e</span><span style="--d:2">l</span><span style="--d:3">l</span><span style="--d:4">o</span>
</div>

CSS

.wave-text {
  font-size: 30px;
  font-weight: 800;
  color: #1a1a1a;
  display: flex;
}
.wave-text span {
  display: inline-block;
  animation: wave-char 1.5s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.1s);
}
@keyframes wave-char {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-8px); }
}

Wave Text

関連アニメーション