我想讓我的CSS動(dòng)畫運(yùn)行一次，并在最后一個(gè)關(guān)鍵幀停止，但現(xiàn)在它只是返回到第一個(gè)關(guān)鍵幀，動(dòng)畫停止。動(dòng)畫由一個(gè)標(biāo)題組成，隨著時(shí)間的推移，標(biāo)題中充滿了顏色。

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

有人能告訴我我做錯(cuò)了什么嗎？

<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%的動(dòng)畫關(guān)鍵幀是相同的，這使動(dòng)畫看起來好像回到了第一幀。我認(rèn)為從定義0%關(guān)鍵幀的關(guān)鍵幀中移除100%將會(huì)解決這個(gè)問題。

正如@Caleb已經(jīng)說過的，animateX的第一個(gè)和最后一個(gè)關(guān)鍵幀的寬度是:0%；

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

解決方案是:

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

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

@-WebKit-關(guān)鍵幀中也是如此