<div class="bouncy">
  <h1 aria-label="Chilly">
    <span aria-hidden="true" class="text-container">
      <span class="letter">
        <span class="front-letter">C</span>
        <span class="back-letter">C</span>
        <span class="back-letter">C</span>
        <span class="back-letter">C</span>
        <span class="back-letter">C</span>
        <span class="back-letter">C</span>
        <span class="back-letter">C</span>
        <span class="back-letter">C</span>
        <span class="back-letter">C</span>
        <span class="back-letter">C</span>
      </span>
      <span class="letter">
        <span class="front-letter">h</span>
        <span class="back-letter">h</span>
        <span class="back-letter">h</span>
        <span class="back-letter">h</span>
        <span class="back-letter">h</span>
        <span class="back-letter">h</span>
        <span class="back-letter">h</span>
        <span class="back-letter">h</span>
        <span class="back-letter">h</span>
        <span class="back-letter">h</span>
      </span>
      <span class="letter">
        <span class="front-letter">i</span>
        <span class="back-letter">i</span>
        <span class="back-letter">i</span>
        <span class="back-letter">i</span>
        <span class="back-letter">i</span>
        <span class="back-letter">i</span>
        <span class="back-letter">i</span>
        <span class="back-letter">i</span>
        <span class="back-letter">i</span>
        <span class="back-letter">i</span>
      </span>
      <span class="letter">
        <span class="front-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
      </span>
      <span class="letter">
        <span class="front-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
      </span>
      <span class="letter">
        <span class="front-letter">y</span>
        <span class="back-letter">y</span>
        <span class="back-letter">y</span>
        <span class="back-letter">y</span>
        <span class="back-letter">y</span>
        <span class="back-letter">y</span>
        <span class="back-letter">y</span>
        <span class="back-letter">y</span>
        <span class="back-letter">y</span>
        <span class="back-letter">y</span>
      </span>
    </span>
  </h1>
</div>

<button type="button" id="startstop">
  Start/stop animation
</button>

@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');

html, body {
    margin: 0;
    padding: 0;
}
.bouncy {
    height: 80vh;
    background-color: #BCAD90;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bouncy h1 {
    font-family: 'Bree Serif', serif;
    font-weight: 700;
    font-size: 25vh;
    margin: 0;
    padding: 0;
    color: #fff;
    -webkit-text-stroke: 5px #000;
    text-transform: uppercase;
    letter-spacing: -2.5vh;
}

.bouncy .letter:nth-child(1) {
    --base-delay: 0ms;
}
.bouncy .letter:nth-child(2) {
    --base-delay: 200ms;
}
.bouncy .letter:nth-child(3) {
    --base-delay: 400ms;
}
.bouncy .letter:nth-child(4) {
    --base-delay: 600ms;
}
.bouncy .letter:nth-child(5) {
    --base-delay: 800ms;
}
.bouncy .letter:nth-child(6) {
    --base-delay: 1000ms;
}

@keyframes bouncy {
    0% {
        transform: translateY(-20%) rotate(6deg);
    }
    50% {
        transform: translateY(20%) rotate(-6deg);
    }
    100% {
        transform: translateY(-20%) rotate(6deg);
    }
}

.bouncy .text-container {
    display: block;
    position: relative;
}
.bouncy .letter {
    display: inline-block;
    position: relative;
}
.bouncy.animated .front-letter,
.bouncy.animated .back-letter {
    display: inline-block;
    animation: bouncy 2.5s infinite ease-in-out;
}
.bouncy .front-letter {
    position: relative;
    z-index: 99999;
}
.bouncy.animated .front-letter {
    animation-delay: var(--base-delay);
}
.bouncy .back-letter {
    position: absolute;
    left: 0;
    user-select: none;
}

.bouncy .back-letter:nth-child(even) {
    -webkit-text-stroke: 5px #fff;
    color: #fff;
}
.bouncy .back-letter:nth-child(odd) {
    -webkit-text-stroke: 5px #000;
    color: #000;
}

.bouncy .back-letter:nth-child(2) {
    animation-delay: calc(var(--base-delay) + 100ms);
    z-index: 9;
}
.bouncy .back-letter:nth-child(3) {
    animation-delay: calc(var(--base-delay) + 200ms);
    z-index: 8;
}
.bouncy .back-letter:nth-child(4) {
    animation-delay: calc(var(--base-delay) + 300ms);
    z-index: 7;
}
.bouncy .back-letter:nth-child(5) {
    animation-delay: calc(var(--base-delay) + 400ms);
    z-index: 6;
}
.bouncy .back-letter:nth-child(6) {
    animation-delay: calc(var(--base-delay) + 500ms);
    z-index: 5;
}
.bouncy .back-letter:nth-child(7) {
    animation-delay: calc(var(--base-delay) + 600ms);
    z-index: 4;
}
.bouncy .back-letter:nth-child(8) {
    animation-delay: calc(var(--base-delay) + 700ms);
    z-index: 3;
}
.bouncy .back-letter:nth-child(9) {
    animation-delay: calc(var(--base-delay) + 800ms);
    z-index: 2;
}
.bouncy .back-letter:nth-child(10) {
    animation-delay: calc(var(--base-delay) + 900ms);
    z-index: 1;
}

button {
  position: fixed;
  top: 12px;
  left: 12px;
  font-size: 30px;
}

document.querySelector('#startstop').addEventListener('click', () => {
  document.querySelector('.bouncy').classList.toggle('animated')
})