使用 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

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

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

<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>

使用 CSS3 结束关键帧动画

End Keyframe Animation Using CSS3

html

javascript

css

jquery