CSSで文字が揺れるアニメーションのサンプルソースコード

ソースコード

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

<div class="mamSway">
  <span><span style="--mamSwayDelay:  0ms;">文</span></span>
  <span><span style="--mamSwayDelay:200ms;">字</span></span>
  <span><span style="--mamSwayDelay:400ms;">が</span></span>
  <span><span style="--mamSwayDelay:  0ms;">揺</span></span>
  <span><span style="--mamSwayDelay:600ms;">れ</span></span>
  <span><span style="--mamSwayDelay:200ms;">ま</span></span>
  <span><span style="--mamSwayDelay:  0ms;">す</span></span>
</div>

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