css animations not sliding right-CodePudding

I just started to study css and html. I tried to copy a css code animation that I found on the web, but it is not working like it is supposed to. The right border should slide and change the color of the text from left to right and then slide back recharging the text color. Can somebody help me find the error and try to understand how this works better? Animation design

h2 {
    position: relative;
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 5rem;
    -webkit-text-stroke: 0.3vw pink;
}

h2::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    color: red;
    -webkit-text-stroke: 0vw red;
    border-right: 2px solid red;
    overflow: hidden;
    animation: animate 6s linear infinite;
    -webkit-animation: animate 6s linear infinite;
}

@keyframes animation {
    0%{
        width: 0%;
    }
    70%{
        width: 100%;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title Animation 01</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2 data-text="Animation">
        Animation
    </h2>
</body>
</html>

CodePudding user response：

You have the wrong animation name. Change the name of the @keyframes rule to animate instead of animation.

h2 {
    position: relative;
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 5rem;
    -webkit-text-stroke: 0.3vw pink;
}

h2::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    color: red;
    -webkit-text-stroke: 0vw red;
    border-right: 2px solid red;
    overflow: hidden;
    animation: animate 6s linear infinite;
    -webkit-animation: animate 6s linear infinite;
}

@keyframes animate {
    0%{
        width: 0%;
    }
    70%{
        width: 100%;
    }
}

<h2 data-text="Animation">
        Animation
    </h2>