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%;
        }
    }

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

1 个答案: