CSSで文字が弾むバウンドアニメーションのサンプルソースコード

ソースコード

カスタムプロパティ(変数)「--mamBoundDelay」の値を使ってアニメーションの遅延時間を設定しています。

<div class="mamBound">
  <span><span style="--mamBoundDelay:   0ms;">バ</span></span>
  <span><span style="--mamBoundDelay: 200ms;">ウ</span></span>
  <span><span style="--mamBoundDelay: 400ms;">ン</span></span>
  <span><span style="--mamBoundDelay: 600ms;">ド</span></span>
  <span><span style="--mamBoundDelay: 800ms;">し</span></span>
  <span><span style="--mamBoundDelay:1000ms;">て</span></span>
  <span><span style="--mamBoundDelay:1200ms;">回</span></span>
  <span><span style="--mamBoundDelay:1400ms;">転</span></span>
  <span><span style="--mamBoundDelay:1600ms;">す</span></span>
  <span><span style="--mamBoundDelay:1800ms;">る</span></span>
</div>

<style>
  .mamBound{
    font-size:32px;
    padding:4px;
  }
  .mamBound>span{
    position:relative;
    display:inline-block;
    width:1em;
    vertical-align:top;
  }
  .mamBound>span>span{
    position:absolute;
    color:#333;
    text-shadow:2px 2px 3px rgba(0,0,0,0.5);
    /*  アニメーション名 時間   ﾀｲﾐﾝｸﾞ  開始までの遅延時間    無限   順→逆再生  */
    animation:mamAniBound 1200ms ease-in-out var(--mamBoundDelay) infinite alternate both running;
  }
  @keyframes mamAniBound{
    0%{
      transform:translateY(0em) rotateY(0deg) scale(1,1);
    }
    100%{     /*3em下にバウンド   180度回転     大きさ80% */
      transform:translateY(3em) rotateY(180deg) scale(0.8,0.8);
    }
  }
</style>