带有@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 链接：

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>