使用CSS3

Question

我使用CSS中的关键帧创建了一个简单的条形动画，并将其应用于id标记

#progress-skill {    
    animation: color-bar 2s, animate-bar 2s;
    animation-fill-mode: forwards;  
    position: relative;    
    border-radius: 3px;
    width: 400px;
}

@keyframes color-bar {
   5% { background-color: red;}
   25% { background-color: orange;}
   50% { background-color: yellow;}
   75% { background-color: green;}
   100% { background-color: blue;}
}      

@keyframes animate-bar {
   from {width: 0px; }
   to {width: 200px; }
} 

<div class="progress">
   <div class="progress-title"><span>SKILL NAME</span></div>
   <div class="progress-bar" id="progress-skill"><span>50%</span></div> 
</div>

动画效果很好，但不管百分比是多少，颜色总是最终为100％背景颜色。有没有办法强制动画以某个百分比停止？基本上我在这里寻找的是由条的宽度触发的动画背景颜色。如果条形长度为50％，那么它应该是50％背景颜色并在此时停止。同样应该适用于25％或75％。

我不是在寻找 javascript 解决方案，但如果这是唯一可行的方法，我愿意妥协。

Answer 1

javascript会让它变得更容易。 但是我开始玩CSS了，有点进步了。 现在必须回家，所以我无法完成它。 https://jsfiddle.net/L9bznjLb/

@keyframes color-bar {
    from {width: 0px; }
    to {width: 20px; }

Answer 2

我很确定你不能按照你要求的方式停止动画。我最好的建议是使用类名而不是id为每个百分比创建几个变体，如下所示：

＆＃13;

＆＃13;

.progress-bar { 
    position: relative;    
    border-radius: 3px;
    width: 400px;
}

.progress-bar-5 {    
    animation: color-bar-5 2s, animate-bar-5 2s;
    animation-fill-mode: forwards; 
}
.progress-bar-25 {    
    animation: color-bar-25 2s, animate-bar-25 2s;
    animation-fill-mode: forwards; 
}
.progress-bar-50 {    
    animation: color-bar-50 2s, animate-bar-50 2s;
    animation-fill-mode: forwards; 
}
.progress-bar-75 {    
    animation: color-bar-75 2s, animate-bar-75 2s;
    animation-fill-mode: forwards; 
}
.progress-bar-100 {    
    animation: color-bar-100 2s, animate-bar-100 2s;
    animation-fill-mode: forwards; 
}

@keyframes color-bar-5 {
   100% { background-color: red;}
}

@keyframes color-bar-25 {
   20% { background-color: red;}
   100% { background-color: orange;}
}

@keyframes color-bar-50 {
   10% { background-color: red;}
   50% { background-color: orange;}
   100% { background-color: yellow;}
}

@keyframes color-bar-75 {
   7% { background-color: red;}
   33% { background-color: orange;}
   67% { background-color: yellow;}
   100% { background-color: green;}
}

@keyframes color-bar-100 {
   5% { background-color: red;}
   25% { background-color: orange;}
   50% { background-color: yellow;}
   75% { background-color: green;}
   100% { background-color: blue;}
}

@keyframes animate-bar-5 {
   from {width: 0px; }
   to {width: 10px; }
}

@keyframes animate-bar-25 {
   from {width: 0px; }
   to {width: 50px; }
}

@keyframes animate-bar-50 {
   from {width: 0px; }
   to {width: 100px; }
}

@keyframes animate-bar-75 {
   from {width: 0px; }
   to {width: 150px; }
}

@keyframes animate-bar-100 {
   from {width: 0px; }
   to {width: 200px; }
}

＆＃13;

<div class="progress">
   <div class="progress-title"><span>SKILL NAME</span></div>
   <div class="progress-bar progress-bar-50"><span>50%</span></div> 
</div>

<div class="progress">
   <div class="progress-title"><span>SKILL NAME</span></div>
   <div class="progress-bar progress-bar-25"><span>25%</span></div> 
</div>

<div class="progress">
   <div class="progress-title"><span>SKILL NAME</span></div>
   <div class="progress-bar progress-bar-75"><span>75%</span></div> 
</div>

＆＃13;

＆＃13;

＆＃13;