我想讓我的CSS動畫運行一次，并在最后一個關鍵幀停止，但現在它只是返回到第一個關鍵幀，動畫停止。動畫由一個標題組成，隨著時間的推移，標題中充滿了顏色。

我正在WordPress的Elementor插件中使用這段代碼。

有人能告訴我我做錯了什么嗎？

<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>

0%和100%的動畫關鍵幀是相同的，這使動畫看起來好像回到了第一幀。我認為從定義0%關鍵幀的關鍵幀中移除100%將會解決這個問題。

正如@Caleb已經說過的，animateX的第一個和最后一個關鍵幀的寬度是:0%；

這意味著，在開始時，寬度將是0%，然后它將執行其他幀，直到最后，其中再次是0%。

解決方案是:

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

請注意我是如何更改關鍵幀的百分比的，因此它以寬度:100%結束(在關鍵幀的100%處)

@-WebKit-關鍵幀中也是如此