Есть ли способ заставить анимации по ключевым кадрам работать с обрезкой текста webkit?

Question

Я пытался сделать простую ключевую анимацию с постепенным исчезновением текста. Это работает, однако на обрезанном тексте webkit текст не будет отображаться. Css ниже.

  .animationA{
    margin-top: 10%;
    opacity: 1;
    animation: textscroll 500ms ease-in 250ms 1 forwards;
  }


    @keyframes textscroll {
    0%{
      margin-top: 10%;
      opacity: 0;
    }

    100% {
      margin-top : 15px;
      opacity: 1;
    }

  }

  .hero .hero-content h1 {
  font-size: 46px;
  line-height: 50px;
  font-weight: 600;
  background: rgb(0,212,255);
  background: linear-gradient(160deg, rgba(0,212,255,1) 0%, rgba(9,9,121,1) 77%, rgba(2,0,36,1) 100%);  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

Если я пытаюсь оживить элемент h1, он просто не появляется. Любая помощь в этом решении будет принята с благодарностью.

Answer 1

Это была проблема с вложенным в H1 пролетом, который по какой-то причине нарушал анимацию ключевого кадра. Я даже не думал включать HTML, что мне плохо.