CSSアニメーションをスマホでも機能させる方法で躓いています

実現したいこと

CSSアニメーションをスマホでも機能させるようにしたい

前提

CSSでアニメーションを実装しようとしています。
PCでは動いたのですが、スマホでは表示されず困っています。
コードは下記になります。
恐れ入りますが、どなたかお助けいただけると嬉しいです。

・参考
下記サイト5番目のアニメーションを使用しています。
Pure CSS Text Reveal
https://fastcoding.jp/blog/all/info/202104-text-animation/

:root {
    --delay: 0;
    --duration: 1200ms;
    --iterations: 1;
  }
  /* •·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */
  
  
  .reveal-text,
  .reveal-text::after {
    animation-delay: var(--animation-delay, 2s);
    animation-iteration-count: var(--iterations, 1);
    animation-duration: var(--duration, 1200ms);
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
  }
  
  .reveal-text {
    --animation-delay: var(--delay, 0);
    --animation-duration: var(--duration, 1200ms);
    --animation-iterations: var(--iterations, 1);
    position: relative;
    font-size: 10vw;
    animation-name: clip-text;
    white-space: nowrap;
    cursor: default;
    
    &::after {
      content: "";
      position: absolute;
      z-index: 999;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #07415B;
      transform: scaleX(0);
      transform-origin: 0 50%;
      pointer-events: none;
      animation-name: text-revealer;
    }
    
  }
@keyframes clip-text {
    0% {
    clip-path: inset(0 100% 0 0);
    }
    99.9%,
    to {
    clip-path: inset(0 0 0 0);
    }
    }
  
  @keyframes text-revealer {
    0% {
    transform-origin: 0 50%;
    }
    50% {
    transform-origin: 0 50%;
    }
    60% {
    transform-origin: 100% 50%;
    }
    60% {
        transform: scaleX(1);
        }
    99.9%,
    to{
    transform-origin: 100% 50%;
    }
    99.9%,
    to{
    transform: scaleX(0);
    }
    }