Остановка анимации @keyframes на определенном ключевом кадре ⇐ CSS

[Anonymous]

У меня есть простая анимация ключевых кадров CSS (из https://codepen.io/hopefulcodegirl/pen/WNwmOQX). Мне интересно, есть ли способ остановить анимацию на определенном ключевом кадре (это будет основано на данных Я получаю из бэкэнда) - чтобы индикатор выполнения останавливался на каком-то проценте. Единственный способ, который я могу придумать, — это генерировать CSS-файлы при первом рендеринге веб-сайта с различными ключевыми кадрами, определенными внутри, в зависимости от целевого процентного значения. Но вряд ли это кажется эффективным методом. Единственный ли у меня вариант — просто переделать анимацию в JS?


< pre class="snippet-code-css lang-css Prettyprint-override">

Код: Выделить всё

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

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/790 ... c-keyframe