有没有办法让关键帧动画与 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，这是我的错。