バウンド文字ヒーロー

<div class="d01-01-10-hero">
          <div class="d01-01-10-inner io-reveal">
            <h1>
              <span>跳</span><span>ね</span><span>る</span><span>言</span><span>葉</span><span>、</span><span>弾</span><span>む</span><span>心</span><span>。</span>
            </h1>
            <p>1文字ずつぴょんと登場する、遊び心のあるタイトルです。</p>
          </div>
        </div>

.prev.d01-01-10{padding:0;display:block;min-height:320px}
        .d01-01-10-hero{height:320px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fff3d6 0%,#ffd9e8 100%);text-align:center}
        .d01-01-10-inner{padding:24px}
        .d01-01-10-hero h1{font-size:27px;font-weight:800;color:#4a3320;letter-spacing:.06em;margin:0 0 16px}
        .d01-01-10-hero h1 span{display:inline-block;opacity:0;transform:translateY(36px) scale(.6);
          transition:opacity .45s ease,transform .55s cubic-bezier(.2,1.8,.4,1)}
        .d01-01-10-inner.is-in h1 span{opacity:1;transform:translateY(0) scale(1)}
        .d01-01-10-inner.is-in h1 span:nth-child(1){transition-delay:.05s}
        .d01-01-10-inner.is-in h1 span:nth-child(2){transition-delay:.13s}
        .d01-01-10-inner.is-in h1 span:nth-child(3){transition-delay:.21s}
        .d01-01-10-inner.is-in h1 span:nth-child(4){transition-delay:.29s}
        .d01-01-10-inner.is-in h1 span:nth-child(5){transition-delay:.37s}
        .d01-01-10-inner.is-in h1 span:nth-child(6){transition-delay:.45s}
        .d01-01-10-inner.is-in h1 span:nth-child(7){transition-delay:.53s}
        .d01-01-10-inner.is-in h1 span:nth-child(8){transition-delay:.61s}
        .d01-01-10-inner.is-in h1 span:nth-child(9){transition-delay:.69s}
        .d01-01-10-inner.is-in h1 span:nth-child(10){transition-delay:.77s}
        .d01-01-10-hero p{color:#8a6a4e;font-size:12.5px;line-height:1.9;margin:0;opacity:0;transition:opacity .6s ease .9s}
        .d01-01-10-inner.is-in p{opacity:1}