Question 183086 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – 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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search