I have a simple CSS keyframes animation (from https://codepen.io/hopefulcodegirl/pen/WNwmOQX) – I was wondering if there is a way to stop the animation at a specific keyframe (this would be based on data I get from backend) – so that the progress bar stops at some give percentage. The only way I can think of is generating CSS files on first website render with different keyframes defined inside, depending on the target percent value. But this hardly seems like an efficient method. Is my only option to just redo the animation in JS?
.color-container {
width: 100%;
height: 200px;
margin: 0;
padding: 0;
animation: background_load 5s infinite;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
width: 50%;
/*margin: 280px auto;*/
/*padding: 20px 40px;*/
border-radius: 4px;
box-sizing: border-box;
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10px;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
}
.Loading:after {
content: '';
position: absolute;
left: 0;
width: 0;
height: 100%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s forwards;
}
@keyframes load {
0.0% {
width: 0.0%;
background: #94e02d;
}
2.04% {
width: 2.04%;
background: #96e02c;
}
4.08% {
width: 4.08%;
background: #98e12b;
}
6.12% {
width: 6.12%;
background: #9ae12a;
}
8.16% {
width: 8.16%;
background: #9ce229;
}
10.2% {
width: 10.2%;
background: #9ee328;
}
12.24% {
width: 12.24%;
background: #a1e327;
}
14.29% {
width: 14.29%;
background: #a3e426;
}
16.33% {
width: 16.33%;
background: #a5e525;
}
18.37% {
width: 18.37%;
background: #a7e524;
}
20.41% {
width: 20.41%;
background: #a9e623;
}
22.45% {
width: 22.45%;
background: #ace622;
}
24.49% {
width: 24.49%;
background: #aee721;
}
26.53% {
width: 26.53%;
background: #b0e821;
}
28.57% {
width: 28.57%;
background: #b2e820;
}
30.61% {
width: 30.61%;
background: #b4e91f;
}
32.65% {
width: 32.65%;
background: #b6ea1e;
}
34.69% {
width: 34.69%;
background: #b9ea1d;
}
36.73% {
width: 36.73%;
background: #bbeb1c;
}
38.78% {
width: 38.78%;
background: #bdec1b;
}
40.82% {
width: 40.82%;
background: #bfec1a;
}
42.86% {
width: 42.86%;
background: #c1ed19;
}
44.9% {
width: 44.9%;
background: #c4ed18;
}
46.94% {
width: 46.94%;
background: #c6ee17;
}
48.98% {
width: 48.98%;
background: #c8ef16;
}
51.02% {
width: 51.02%;
background: #caef16;
}
53.06% {
width: 53.06%;
background: #ccf015;
}
55.1% {
width: 55.1%;
background: #cef114;
}
57.14% {
width: 57.14%;
background: #d1f113;
}
59.18% {
width: 59.18%;
background: #d3f212;
}
61.22% {
width: 61.22%;
background: #d5f211;
}
63.27% {
width: 63.27%;
background: #d7f310;
}
65.31% {
width: 65.31%;
background: #d9f40f;
}
67.35% {
width: 67.35%;
background: #dcf40e;
}
69.39% {
width: 69.39%;
background: #def50d;
}
71.43% {
width: 71.43%;
background: #e0f60c;
}
73.47% {
width: 73.47%;
background: #e2f60b;
}
75.51% {
width: 75.51%;
background: #e4f70b;
}
77.55% {
width: 77.55%;
background: #e6f80a;
}
79.59% {
width: 79.59%;
background: #e9f809;
}
81.63% {
width: 81.63%;
background: #ebf908;
}
83.67% {
width: 83.67%;
background: #edf907;
}
85.71% {
width: 85.71%;
background: #effa06;
}
87.76% {
width: 87.76%;
background: #f1fb05;
}
89.8% {
width: 89.8%;
background: #f4fb04;
}
91.84% {
width: 91.84%;
background: #f6fc03;
}
93.88% {
width: 93.88%;
background: #f8fd02;
}
95.92% {
width: 95.92%;
background: #fafd01;
}
97.96% {
width: 97.96%;
background: #fcfe00;
}
100.0% {
width: 100.0%;
background: #ffff00;
}
}
<div class="color-container">
<div class="container">
<div class="Loading"></div>
</div>
</div>