CSS Bouncing Text Animation Using Custom Properties — With Sample Code

Sample of the Bouncing Text Animation

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 bouncing text animation with staggered timing.

Source Code

The custom property (variable) --mamBoundDelay is used to set the animation delay for each character.

<div class="mamBound">
    <span><span style="--mamBoundDelay:   0ms;">B</span></span>
    <span><span style="--mamBoundDelay: 200ms;">a</span></span>
    <span><span style="--mamBoundDelay: 400ms;">u</span></span>
    <span><span style="--mamBoundDelay: 600ms;">n</span></span>
    <span><span style="--mamBoundDelay: 800ms;">c</span></span>
    <span><span style="--mamBoundDelay:1000ms;">e</span></span>
    <span><span style="--mamBoundDelay:1200ms;">&</span></span>
    <span><span style="--mamBoundDelay:1400ms;">R</span></span>
    <span><span style="--mamBoundDelay:1600ms;">o</span></span>
    <span><span style="--mamBoundDelay:1800ms;">t</span></span>
    <span><span style="--mamBoundDelay:2000ms;">a</span></span>
    <span><span style="--mamBoundDelay:2200ms;">t</span></span>
    <span><span style="--mamBoundDelay:2400ms;">e</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-name | duration | timing-function | delay | infinite | alternate  */
    animation:mamAniBound 1200ms ease-in-out var(--mamBoundDelay) infinite alternate both running;
  }
  @keyframes mamAniBound{
    0%{
      transform:translateY(0em) rotateY(0deg) scale(1,1);
    }
    100%{  /*  bounce down 3em | rotate 180deg | scale to 80% */
      transform:translateY(3em) rotateY(180deg) scale(0.8,0.8);
    }
  }
</style>