如何使用关键帧中途停止进度条动画

Question

我正在尝试将进度条加载到某个百分比。无论该百分比是多少，进度条都会停在关键帧中指定的特定颜色动画处。 我怎样才能让它工作。

HTML

<div class="container">
    <div class="progress-bar">
        <span style="width:50%">
            <span class="progress-value"></span>
        </span>
    </div>
        <span><strong>CSS</strong></span>
    <br/>
</div>

CSS

.container {
        display: flex;
        justify-content: center;
    }
    .progress-bar {
        background-color: lightgray;
        border-radius: 1.25em;
        width: 300px;
        height: 16px;
        width: 50vw;
    }
    .progress-bar > span {
        display: flex;
    }
    .progress-value {
        background-color: #673ab7;
        transition: 0.3s all linear;
        border-radius: 1.25em;
        height: 16px;
        width: 50vw;
        animation: progress-color 3s linear forwards;
        -webkit-animation: progress-color 3s linear forwards;
    }
    /* animation */
    @keyframes progress-color {
        0% {
            width: 0;
        }
        50% {
            width: 30%;
            background: purple;
        }
        100% {
            background: green;
            width: 100%;
        }
    }
    @-webkit-keyframes progress-color {
        0% {
            width: 0;
        }
        50% {
            width: 30%;
            background:red;
        }
        100% {
            background: green;
            width: 100%;
        }
    }

这是我的代码笔 https://codepen.io/mingsterism/pen/xJgePK

Answer 1

问题是你在 @keyframes 下指定动画 100% 完成的地方，你必须指定红色作为颜色，当条达到 50% 时你指定为你想要的颜色，而其余的的代码很好。用下面这段代码替换你的一段代码，然后告诉你，这是你想要的吗？

 @keyframes progress-color {
        0% {
            width: 0;
        }
        50% {
            width: 30%;
            background: green;
        }
        100% {
            background: red;
            width: 100%;
        }
    }
    @-webkit-keyframes progress-color {
        0% {
            width: 0;
        }
        50% {
            width: 30%;
            background: green;
        }
        100% {
            background: red;
            width: 100%;
        }
    }