CSS Shaking Text Animation, One Character at a Time — Using Custom Properties (With Sample Code)

Sample of a Character-by-Character Shaking Text Animation Using Only CSS

By using CSS custom properties (variables), you can apply the same animation and @keyframes while assigning different property values to each individual animation.
In this example, CSS custom properties are used to give each character a different delay value, creating a shaking animation that moves each character one by one.

Source Code

The custom property (variable) --mamSwayDelay is used to set the animation delay.

<div class="mamSway">
  <span><span style="--mamSwayDelay:  0ms;">S</span></span>
  <span><span style="--mamSwayDelay:200ms;">w</span></span>
  <span><span style="--mamSwayDelay:400ms;">a</span></span>
  <span><span style="--mamSwayDelay:  0ms;">y</span></span>
  <span><span style="--mamSwayDelay:600ms;">s</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-name | duration | timing-function | delay | infinite | alternate  */
    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%{
      transform:translate(-0.1em, 0.1em) rotateY( 0deg) scale(1,1);
    }
  }
</style>