[SOLVED] Animation returns to the beginning keyframe

Animation returns to the beginning keyframe

I want my CSS animation to run through once and stop at the final keyframe, but right now it just returns to the first keyframe and the animation stops. The animation consists of a title heading that fills up with color through time.

I am using this code in the Elementor plugin in WordPress.

Could anyone tell me what I'm doing wrong?

<style>
    :root{
        --myText : 'HELLO';
        --textColor: #EDC300;
        --textStroke: 2px;
        --anDuration: 8s;
    }
    selector{
        -webkit-text-stroke: var(--textStroke) var(--textColor);
        display: table;
        width: -moz-fit-content;
        width: -webkit-fit-content;
        width: fit-content;
        text-align: center;
        margin: 0 auto
    }
    selector .elementor-heading-title::before{
        content: var(--myText);
        color: var(--textColor);
        position: absolute;
        top: 0;
        width: 0%;
        height: 100%;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        border-right: var(--textStroke) solid var(--textColor);
        -webkit-animation:animateX var(--anDuration) linear 1;
        -webkit-animation-fill-mode: forwards;
        animation:animateX var(--anDuration) linear 1;
        animation-fill-mode: forwards;
    }

    @-webkit-keyframes animateX{
       0%,10%,100%{
            width:0%;
        }
       70%, 90%{
            width: 100%;
        }
    }

    @keyframes animateX{
       0%,10%,100%{
            width:0%;
        }
       70%, 90%{
            width:100%;
        }
    }
</style>

Solution

The animation keyframes at 0% and 100% are the same, which would make it seem that the animation had returned to the first frame. I think removing 100% from the keyframe that defines the 0% keyframe, that’ll fix the issue.