文字が飛び跳ねるCSSアニメーション(React + styled-components)

コードの整理&備忘録を兼ねて初めて投稿いたします。
何卒よろしくお願いします。

前提

・React、Next.jsを使用
・styled-componentsを導入済み

コード

import styled, { keyframes } from "styled-components";

const HogePage = () => {

  return (
    <>
      <Container>
        <Bound>
          <span>H</span>
          <span>e</span>
          <span>l</span>
          <span>l</span>
          <span>o</span>
        </Bound>
      </Container>
    </>
  );
};

export default HogePage;

const boundanim = keyframes`
  0%,100% {top: 0;transform: scale(1);}
  30% {top: -25%;}
  50% {transform: scale(1);}
  90% {top: 0;transform: scale(1.2,0.8);}
`;

const Container = styled.div`
  position: relative;
  width: 100%;
  height: 300px;
`;

const Bound = styled.p`
  span {
    font-family: "M PLUS Rounded 1c", sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 50px;
    margin: auto;
    font-size: 5em;
    font-weight: 600;
    color: #501bc1;
    text-align: center;
    width: 100px;
    height: 100px;
    &:nth-child(1) {
      left: -3.3em;
      animation: ${boundanim} 0.8s 0s infinite;
    }
    &:nth-child(2) {
      left: -1.5em;
      animation: ${boundanim} 0.8s 0.1s infinite;
    }
    &:nth-child(3) {
      left: 0em;
      animation: ${boundanim} 0.8s 0.2s infinite;
    }
    &:nth-child(4) {
      left: 1.5em;
      animation: ${boundanim} 0.8s 0.3s infinite;
    }
    &:nth-child(5) {
      left: 3em;
      animation: ${boundanim} 0.8s 0.4s infinite;
    }
  }
`;

結果

補足

・cssの解説は他記事がたくさんあるため割愛
・自分が詰まった箇所はstyled-componentsでどう書くのかという部分だったが、それに関してはこの記事がかなり勉強になった
↓
https://blog.ojisan.io/s-c-kigo/

・特にSCSSの理解がないと何が分からないのか分からなくなってしまうので、一つ一つ理解していくしかないと感じた

参考にさせていただいた記事

https://blog.ojisan.io/s-c-kigo/#scss-の復習
https://qiita.com/ku1987/items/89ef25c8c59286d9a181
https://qiita.com/RyoTa_0222/items/b35ad1ffbde9ba99354a
https://1-notes.com/css-bound-animation/