• HTML
• CSS

HTML

<h2 data-text="Creative...">Creative...</h2>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins';
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#252839;
}
h2
{
    position:relative;
    font-size:14vh;
    color:#252839;
    -webkit-text-stroke:0.3vw #383d52;
    text-transform:uppercase;
}
h2::before
{
    content:attr(data-text);
    position:absolute;
    top:0px;
    left:0px;
    width:0;
    height:100%;
    color:#01fe87;
    -webkit-text-stroke:0vw #383d52;
    border-right:2px solid #01fe87;
    overflow:hidden;
    animation:animate 6s linear infinite;
    
}
@keyframes animate
{
    0%,10%,100%
    {
        width:0;
    }
    70%,90%
    {
        width:100%;
    }
}

/*
    All the credist: https://www.youtube.com/watch?v=ccO2B40zkv4
*/