The animation loop completes and restarts from the initial keyframe

I have a CSS animation that I want to play through once and then stop at the final keyframe. However, currently it keeps returning to the initial keyframe and stopping there instead of reaching the end. The animation involves a title heading that gradually fills up with color over time.

This code is being used within the Elementor plugin on my WordPress site.

Can anyone help me figure out what mistake I might be making?

<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>
csswordpresscss-animationselementorwebkit-animation

Answer №1

When the animation keyframes at 0% and 100% are identical, it may appear as though the animation has looped back to the starting frame. To address this issue, I suggest removing the 100% from the keyframe declaration that corresponds with 0%.

Answer №2

Just like @Caleb mentioned, the animateX keyframes begin and end with a width of 0%.

This indicates that the width starts at 0%, progresses through other frames, and eventually returns to 0% at the end.

To resolve this issue, you can adjust the keyframes as follows:

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

Notice how I modified the percentages in the keyframes so that it culminates (at 100% of keyframes) in a width of 100%.

The same adjustment should be made for @-webkit-keyframes as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Concealing a table row if a different row is devoid of content

In my table, I have dynamic rows that are either date rows or content rows. This allows me to display news items below the corresponding date row. <table class="channel-data"> <tbody> <?php $current_date = ""; while($programs=$ ...

phpjqueryhtmlcss

Resizing the Vue page to fit the viewport and using Flexbox to anchor the footer to the bottom

My Vue.js page structure consists of a navigation bar, main body content, and a footer: <template> <div class="flex_container"> <div class="container_navigation"> <nav-bar /> </div> < ...

cssvue.jsflexbox

What could be causing appendChild to malfunction?

I'm having an issue trying to create three elements (parent and one child) where the third element, an <a> tag, is not appending to modalChild even though it's being created correctly. modal = document.createElem ...

javascripthtmlcss

Struggling to add custom styles to an Ionic radio button

I'm struggling to adjust the position of the icon in an Ionic radio button so that it sits a bit higher, but I can't seem to figure out how to do it. Below is the code snippet for reference: // HTML <ion-radio class="radio-input" mo ...

cssangularionic-frameworksass

Unusual addition symbols in the Bootstrap stylesheet

Something unusual is occurring in my bootstrap css code. I am noticing strange plus signs that seem out of place, and I cannot pinpoint a reason for their existence. Here's an example (you might need to enlarge the view as they are quite small): Thi ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Element in the Middle

I have just started learning HTML and CSS, and I'm curious to know how I can center the links Home, About, and Contact in the header. HTML: <body> <header> <h1><a href="#">HBT</a> </h1& ...

htmlcss

Utilize jQuery setInterval to dynamically add and remove classes on elements

My goal is to display my image in a way that resembles waving flames. I decided to achieve this effect by using two layers (flame tongues) stacked on top of each other in the same position. My initial approach was to hide one flame tongue while showing the ...

javascriptjqueryhtmlcss

Why has my dropdown menu decided to go horizontal, rather than dropping down as it should?

Hi there! I'm new to css and tried following a tutorial with some tweaks. However, when adding a drop down menu using lists, it ended up going sideways instead of downward. Can anyone help me out? I also would like to have a collapsible menu implemen ...

htmlcssdrop-down-menu

Unspecified variable in AngularJS data binding with Onsen UI

I am new to Onsen UI and AngularJS, and I have a simple question about data binding. When I use the variable $scope.name with ng-model in an Onsen UI template, it returns as UNDEFINED. Here is my code: <!doctype html> <html lang="en" ng-app="simp ...

javascripthtmlcssonsen-ui

The sidebar vanishes when you move your cursor over the text contained within

My issue is that the side menu keeps closing when I hover over the text inside it. The "About" text functions correctly, but the other three don't seem to work as intended. Despite trying various solutions, I am unable to identify the root cause of th ...

javascripthtmlcss

Issue with the positioning of bootstrap popover after content is added

Having trouble writing a function that adds a textarea to the bottom of a popover content when clicking on a button. The issue is that once the textarea is displayed, the popover extends downward and obscures the text. I'm looking for a solution where ...

javascriptjqueryhtmlcsstwitter-bootstrap

One problem with placing Bootstrap columns inside another column

Currently, I am in the process of working on a website that requires a description section. To achieve this, I decided to use two Bootstrap columns – one with a size of 8 and another with a size of 4, totaling up to 12 grid units. Inside the column sized ...

htmlcsstwitter-bootstrappositioncss-position

Tips for effectively placing a page scope block using BEM

Here is the current structure of my header. The page component is assumed to be the root. Currently, the geometry of the social-links block is being controlled by the header__social-links mix (positioned absolutely relative to the header). How can I prop ...

htmlcssbem

What is the best way to decrease the size of a SELECT element in Bootstrap 3?

Is there a way to combine form-control and input-mini classes in order to create a SELECT element with a width of around 60px and a height of approximately 20px? <select id="RoleSelect" class="form-control input-mini { width: 60px; }" runat="server"> ...

csstwitter-bootstrap

Steps for Disabling col-sm and col-xs in Bootstrap 3

Hey there! I'm currently working on a template using Bootstrap 3. Initially, I planned to make it responsive for all devices, but I have since changed my mind and decided that the template is already complete. I've utilized col-md in each row, h ...

jqueryhtmlcsstwitter-bootstrap

Why isn't the image utilizing all the available space?

I'm working on creating a simple card to display services, with just an image and some text. However, I'm facing an issue where the image is not taking up the full width and height of the container as expected. Could someone help me figure out w ...

cssreactjsnext.jssass

Issue with 'backface-visibility' CSS3 property not functioning on any versions of Internet Explorer

I'm looking to implement a specific animation in Internet Explorer. The goal is to rotate an image like a coin, displaying a different image on the other side. I suspect that the issue lies with Backface-visibility in IE, but I'm not entirely sur ...

javascriptjqueryhtmlcss

When a td element is clicked, the Textbox will also be clicked

Similar Question: Dealing with jQuery on() when clicking a div but not its child $(oTrPlanning).prev().children('td').each(function () { this.onclick = setCountClick; }); When a TD element is clicked, the function setCountClick() i ...

javascriptjqueryhtmlcss

The div containers are unable to be positioned side by side

Hey there, I'm having trouble with my coding right now. (I'm not sure if you can see it, but the code is creating a div - frustrating). Here's an image of the code: No matter what code I try to use to align the content center, left, or righ ...

csshtml

Display upon hovering, conceal with a button located within a popup container

There seems to be an issue with the code below. Even though it works perfectly in jsfiddle, it breaks in my Chrome and other browsers right after displaying the ".popup" div. Can anyone point out what I might be doing wrong? I found similar code on this si ...

javascriptjqueryhtmlcssjquery-hover