css 动画返回到开始关键帧

63lcw9qa 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(157)

我希望我的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>

css

来源：https://stackoverflow.com/questions/76411000/animation-returns-to-the-beginning-keyframe

2条答案

按热度按时间

ymzxtsji1#

0%和100%处的动画关键帧是相同的，这会使动画看起来似乎已返回到第一帧。我认为从定义0%关键帧的关键帧中删除100%可以解决这个问题。

赞(0）回复(0）举报 2023-06-07

stszievb2#

正如@Caleb所说，animateX的第一个和最后一个关键帧具有宽度：0%;
这意味着在开始时，宽度将为0%，然后它将执行其他帧，直到最后一帧，其中再次为0%。
解决办法是：

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

注意我是如何改变关键帧的百分比的，所以它以宽度结束（在100%的关键帧处）：百分百
在@-webkit-keyframes中也是如此

赞(0）回复(0）举报 2023-06-07

我来回答

css 动画返回到开始关键帧

2条答案

相关问题

热门标签

最新问答