CSS动画执行后返回起始关键帧，如何使其停在最终关键帧？（Elementor）

问题根源 #

你定义的animateX关键帧中，100%的状态被设置为width:0%，而animation-fill-mode: forwards的作用是让元素保留动画最后一帧的样式。所以动画结束后，元素会回到宽度0%的起始状态，这和你想要的停在填充完成状态完全相反。

修复代码 #

修改关键帧的定义，把100%的width值改成100%，同时调整时间节点让动画逻辑更合理（确保结束阶段保持填充完成状态）：

<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;
        position: relative; /* 新增：让伪元素的absolute定位基于父元素 */
    }
    selector .elementor-heading-title::before{
        content: var(--myText);
        color: var(--textColor);
        position: absolute;
        top: 0;
        left: 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 forwards;
        animation: animateX var(--anDuration) linear 1 forwards;
        /* 合并animation属性，简化代码 */
    }

    @-webkit-keyframes animateX{
       0%{
            width:0%;
        }
       10%, 70%{ /* 10%开始过渡，70%完成填充 */
            width: 100%;
        }
       90%, 100%{ /* 90%到结束保持填充状态 */
            width:100%;
        }
    }

    @keyframes animateX{
       0%{
            width:0%;
        }
       10%, 70%{
            width: 100%;
        }
       90%, 100%{
            width:100%;
        }
    }
</style>

额外优化说明 #

• 父元素添加position: relative：解决伪元素absolute定位偏移问题，让它以父标题为基准定位。
• 伪元素添加left: 0：确保填充的文字和原标题完全对齐，避免错位。
• 合并animation属性：将animation-fill-mode: forwards整合到 shorthand 中，代码更简洁。

内容的提问来源于stack exchange，提问作者Santiago Fabregat