CSS@keyframe动画文本动画不起作用

Question

我是个十足的工程师。

所以问题是动画是单独工作的(分开的文件(，但当我试图在我的网站上使用它时，它并没有像应该的那样填满。我试着改变我网站上的每一种颜色和颜色的透明度，但无济于事。我不知道我做错了什么，我该如何解决它，因为我真的复制和粘贴了工作代码；(

我在这里放了两个链接，关于它应该如何和它是如何：

1. 应该如何-https://jsfiddle.net/42x0md5s/
2. 它是如何(窃听(-https://jsfiddle.net/5duf2aw7/1/

不起作用的代码段从第209行开始

/* STARBUCKS ANIMATION */
span 
{
position: relative;
font-size:14vw;
color:#252839;
-webkit-text-stroke: 0.3vw #383d52;
text-transform: uppercase;
}
span::before
{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
color:#017143;
-webkit-text-stroke: 0vw #383d52;
border-right: 2px solid #017143;
overflow:hidden;
animation: animate 6s linear infinite;
}
@keyframes animate 
{
0%,10%,100%
{
width: 0;
}
70%,90%
{
width: 100%; 
}
}

提前感谢任何能够解决问题的人。<3

Answer 1

您需要做两件事：

• 将.content .textBox h1 span上的color更改为透明。它已经是绿色了，所以你看不到新的颜色
• 在span:before上将content: attr(data-text);更改为content: 'STARBUCKS';