I'm total begginer.

So the problem is that the animation is working alone( separated file) but when i try to use it on my website it doesn't fill up as it should . I tried to change every color and transparency of colors on my website but it doesn't help. I have no idea what i did wrong and how can i solve it because i literally copied and pasted working code ;(

I put here 2 links about how it should be and how it is :

1. How it should be - https://jsfiddle.net/42x0md5s/
2. How it is (bugged) - https://jsfiddle.net/5duf2aw7/1/

The piece of code that it's not working is starting at line 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%; 
    }
  }
    

Thank you in advance to anyone that can solve it. <3

CodePudding user response：

There's two things you need to do:

• Change the color on .content .textBox h1 span to transparent. It's already green so you wouldn't be able to see the new colour.
• Change content: attr(data-text); to content: 'STARBUCKS'; on your span:before.