Animation returns to the beginning keyframe

Question

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>

When inspected with DevTools, what value does the `animation-fill-mode` property have? — Caleb, Jun 06 '23 at 02:20

score 1 · Accepted Answer · answered Jun 06 '23 at 02:24

1

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.

answered Jun 06 '23 at 02:24

Caleb

1,058
1
7
18

Esteban Repupilli · Answer 2 · 2023-06-06T03:00:32.127

As already said by @Caleb the first and last keyframes of animateX have width: 0%;

This means that at the start, width will be 0%, then it will excute the other frames until the last, where with again is 0%.

The solution would be:

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

Note how i changed the percentajes of the keyframes, so it ends (at 100% of keyframes) with width: 100%

The same in @-webkit-keyframes

Animation returns to the beginning keyframe

2 Answers2