带有@keywords 的第二个动画不适用于 div

Question

我正在尝试创建一个进度条，我主要做的是尝试将 2 个动画添加到 2 个单独的进度条 div。这是 html:

/* The animation frames start */


@keyframes progres1 {
    from {width: 0%;}
    to {width: 70%;}
};

@keyframes progres2 {
    from {width: 0%;}
    to {width: 90%;}
};

/* The css for containers start */

.progress-main-container{
    margin-top: 20px;
    margin-bottom: 20px;
}

.progress-container{
    display: flex;
    align-items: center;
}

.progress-container p{
    width: 20ch;
    font-family: 'Montserrat', sans-serif;
}

.progress-1, .progress-2, .progress-3{
    position: relative;
    height: 10px;
    width: 100%;
    border-radius: 15px;
    margin: 10px;
    box-shadow: 0 5px 20px 0 rgb(69 67 96 / 10%);
}


.progress-1 .color-1{
    position: absolute;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #ff8a00, #e52e71);;
    width: 0px;
    height: 10px;
    border-radius: 15px;
    animation: progres1 1s linear;  
    animation-fill-mode: forwards;

}

.progress-2 .color-2{
    position: absolute;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #ff8a00, #e52e71);;
    width: 0px;
    height: 10px;
    border-radius: 15px;
    animation: progres2 1s linear;  
    animation-fill-mode: forwards;

}

.progress-3 .color-3{
    position: absolute;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #ff8a00, #e52e71);;
    width: 0px;
    height: 10px;
    border-radius: 15px;
    animation: progres1 1s linear;  
    animation-fill-mode: forwards;

}

<div class="progress-main-container">
    <div class="progress-container">
        <p>Java</p>
        <p style="width: 5ch !important; font-weight: bold; font-size: 13px;">90%</p>
        <div class="progress-1">
            <div class="color-1"></div>
        </div>
    </div>

    <div class="progress-container">
        <p>HTML/CSS</p>
        <p style="width: 5ch !important; font-weight: bold; font-size: 13px;">90%</p>
        <div class="progress-2">
            <div class="color-2"></div>
        </div>
    </div>

    <div class="progress-container">
        <p>React Native</p>
        <p style="width: 5ch !important; font-weight: bold; font-size: 13px;">90%</p>
        <div class="progress-3">
            <div class="color-3"></div>
        </div>
    </div>
</div>

从上面css可以看出，我正在将动画应用到.progress-x .color-x 类，（x代表1,2和3）。现在我面临的问题是我的第二个进度条，即 css 中的 .progress-2 .color-2，我在其中应用了 progres2 关键帧动画，但没有应用。我的第一个关键帧动画 progres1 应用于我的第一个和最后一个进度条，但由于某种原因我的第二个动画无法为我的第二个进度条设置动画。

这样显示：

enter image description here

我确实尝试将我的第一个动画关键帧与第二个进度条一起应用并且它起作用了，但出于某种原因我的第二个关键帧 progres2 不起作用。

这是 JS Fiddle link :

https://jsfiddle.net/Yeshanh/104t5mvb/5/

我希望有人能帮我把我的第二个关键帧动画应用到我的第二个进度条上，干杯！

Answer 1

你错了;

/* The animation frames start */


@keyframes progres1 {
    from {width: 0%;}
    to {width: 70%;}
}

@keyframes progres2 {
    from {width: 0%;}
    to {width: 90%;}
}

.progress-main-container{
    margin-top: 20px;
    margin-bottom: 20px;
}

.progress-container{
    display: flex;
    align-items: center;
}

.progress-container p{
    width: 20ch;
    font-family: 'Montserrat', sans-serif;
}

.progress-1, .progress-2, .progress-3{
    position: relative;
    height: 10px;
    width: 100%;
    border-radius: 15px;
    margin: 10px;
    box-shadow: 0 5px 20px 0 rgb(69 67 96 / 10%);
}


.progress-1 .color-1{
    position: absolute;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #ff8a00, #e52e71);;
    width: 0px;
    height: 10px;
    border-radius: 15px;
    animation: progres1 1s linear;  
    animation-fill-mode: forwards;

}

.progress-2 .color-2{
    position: absolute;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #ff8a00, #e52e71);;
    width: 0px;
    height: 10px;
    border-radius: 15px;
    animation: progres2 1s linear;  
    animation-fill-mode: forwards;

}

.progress-3 .color-3{
    position: absolute;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #ff8a00, #e52e71);;
    width: 0px;
    height: 10px;
    border-radius: 15px;
    animation: progres1 1s linear;  
    animation-fill-mode: forwards;

}

   <div class="progress-main-container">
                    <div class="progress-container">
                        <p>Java</p>
                        <p style="width: 5ch !important; font-weight: bold; font-size: 13px;">90%</p>
                        <div class="progress-1">
                            <div class="color-1"></div>
                        </div>
                    </div>
                
                    <div class="progress-container">
                        <p>HTML/CSS</p>
                        <p style="width: 5ch !important; font-weight: bold; font-size: 13px;">90%</p>
                        <div class="progress-2">
                            <div class="color-2"></div>
                        </div>
                    </div>

                    <div class="progress-container">
                        <p>React Native</p>
                        <p style="width: 5ch !important; font-weight: bold; font-size: 13px;">90%</p>
                        <div class="progress-3">
                            <div class="color-3"></div>
                        </div>
                    </div>
                </div>

带有@keywords 的第二个动画不适用于 div

Second animation with @keywords does not apply to div

html

css

animation