Animate.CSS 애니메이션 지연 설정

배경.

직접 만든 웹 애플리케이션의 첫 페이지를 만들 때는 텍스트 열에 애니메이션을 추가하려고 합니다.
그래서 애니메이션을 쉽게 가져올 수 있는 프로그램 라이브러리를 찾았는데 이걸 발견했어요.
https://animate.style/
이 창고에 끌리는 점은 세 가지다.

첫 페이지에서 애니메이션의 동작을 확인할 수 있습니다.

간단한 가져오기(5분 이내)

추가하고 싶은 애니메이션의 지정은 간단합니다(Bootstrap의 느낌으로 하면 됩니다)

메시지

나는 위에서부터 세 줄로 구성된 문자열을 순서대로 배열하고 싶다.
Animate.css의 delay는 기본적으로 1초 간격으로 1초에서 5초 간격으로 지연됩니다.
하지만 난 제로야.5초마다 일탈이 시작되는 애니메이션을 구현하고 싶어 어떻게 하면 가능한지 조사했다.
그래서 Animate.나는 CSS의 창고에서 이 파일을 찾았다.
https://github.com/animate-css/animate.css/blob/main/source/_base.css

.animated.delay-1s {
  animation-delay: var(--animate-delay);
}

.animated.delay-2s {
  animation-delay: calc(var(--animate-delay) * 2);
}

.animated.delay-3s {
  animation-delay: calc(var(--animate-delay) * 3);
}

.animated.delay-4s {
  animation-delay: calc(var(--animate-delay) * 4);
}

.animated.delay-5s {
  animation-delay: calc(var(--animate-delay) * 5);
}

https://github.com/animate-css/animate.css/blob/main/source/_base.css인용
이 코드를 응용하여 임의의 시기에 애니메이션을 시작할 수 있는 코드를 써 보았다.
예를 들어, 0.5초~1.6초 0.3초 간격으로 애니메이션을 시작하는 코드는 이겁니다.
index.html

<ul>
    <li class="animate__animated animate__fadeInRight animate__delay-05s">hoge</li>
    <li class="animate__animated animate__fadeInRight animate__delay-08s">hoge2</li>
    <li class="animate__animated animate__fadeInRight animate__delay-1s">hoge3</li>
    <li class="animate__animated animate__fadeInRight animate__delay-13s">hoge4</li>
    <li class="animate__animated animate__fadeInRight animate__delay-16s">hoge5</li>
</ul>

index.css

.animate__delay-05s {
 animation-delay: calc(var(--animate-delay) * 0.5);
}
.animate__delay-08s {
 animation-delay: calc(var(--animate-delay) * 0.8);
}
.animate__delay-13s {
 animation-delay: calc(var(--animate-delay) * 1.3);
}
.animate__delay-16s {
 animation-delay: calc(var(--animate-delay) * 1.6);
}

이렇게 해서 나는 내가 하고 싶은 일을 실현했다.
마지막으로 PDF를 붙여서 애니메이션 동작을 보여드리고 싶은데 어떻게 올려야 할지 모르겠어요.
방법을 아는 사람이 있으면 알려주세요.