如何让CSS进度条动画结束后停在目标百分比而非归零？

问题现象 #

进度条会执行动画，但动画结束后立即回到0%。需求是每次刷新页面时，进度条动画执行到85%后保持该状态，仅在再次刷新时重置。

现有代码 #

HTML

<div class="container">
    <div class="progress-bar"></div>
</div>

CSS

.container {
    height: 10px;
    width: 30%;
    background-color: lightgrey;
    position: relative;
    border-radius: 3px;
    top: 35%;
    left: 15%; 
}

.container .progress-bar {
    position: absolute;
    height: 100%;
    border-radius: 3px;
    background-color: #393939;
    animation: progress-animation 5s forwards;
}

@keyframes progress-animation {
    0% { width: 0%;}
    85% { width: 85%;}
}

问题原因 #

当前定义的@keyframes只包含0%和85%两个关键帧，动画执行到85%节点后，浏览器会默认补全100%的状态——也就是回到初始的0%宽度。虽然给动画加了forwards属性，但关键帧不完整，导致该属性无法生效。

修复方案 #

只需要补全关键帧的结束状态，让动画结束时保持85%的宽度即可，有两种实现方式：

方式一：补全100%关键帧

修改@keyframes，添加100%状态并设置为85%宽度：

@keyframes progress-animation {
    0% { width: 0%;}
    85% { width: 85%;}
    100% { width: 85%;}
}

方式二：直接将目标状态设为100%关键帧

把原85%的关键帧改成100%，让动画执行到结束时停在目标宽度：

@keyframes progress-animation {
    0% { width: 0%;}
    100% { width: 85%;}
}

两种方式都能配合animation: progress-animation 5s forwards;实现需求——动画结束后停在85%，刷新页面会重新执行动画并重置状态。

内容的提问来源于stack exchange，提问作者Jahmar Lawrence