使用CSS3结束关键帧动画

Question

I've created a simple bar animation using keyframes in CSS and applying it to an id tag

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

The animation works fine, with the exception that the color will always end up being the 100% background-color no matter what the percentage is. Is there any way to force the animation to stop at certain percentages? Basically what I'm looking for here is an animation background-color triggered by the width of the bar. If the bar is 50% long then it should be the 50% background-color and stop at that point. The same should hold true for 25% or 75%.

I'm not looking for a javascript solution, but I'm willing to compromise if that's the only method possible.

Answer 1

javascript would make it much easier. but I started playing with the CSS, and kinda made some progress. gotta go home now, so i can't finish it. https://jsfiddle.net/L9bznjLb/

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

Answer 2

I'm pretty sure that you can't stop an animation the way that you are asking. My best suggestion would be to create several variations for each percentage, using class names rather than ids, like so:

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