How to run mulitple keyframes on same page - html

Question

I am currently working on a game and I need some help with some html and css.
I have a page called "crime" and there it is 6 possible crimes you can take, on each of them I want to have a progress bar that counts down. I have made it work on the first one, but as I see on the code the keyframes doesnt go to a specific div, but everything that have the "fill" animation.
Since the crimes have different cooldown times I need to have them show another progress then the others.
<div class="bar">
<div class="in"></div>
</div>
.bar {
border: 1px solid #666;
height: 20px;
width: 100%;
}
.in {
animation: fill 20s linear 1;
height: 100%;
background-color: pink;
}
#keyframes fill {
0% {
width: 0%;
}
100% {
width: 100%;
}
}

Answer 1

I think you need to post more code to make us understand precisely what you are doing.
From what you explained so far, I think you just need to create more keyframes and assigned them to the crime you want.
So if you have this for every crime div
<div class="bar">
<div class="in"></div>
</div>
then you could change the name of the inner div for each crime. E.g:
<div class="bar">
<div class="in-1"></div> //bar for crime 1
</div>
<div class="bar">
<div class="in-2"></div> //bar for crime 2
</div>
.in-1 {
animation: fill1 20s linear 1;
height: 100%;
background-color: pink;
}
.in-2 {
animation: fill2 20s linear 1;
height: 100%;
background-color: pink;
}
#keyframes fill1 {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#keyframes fill2 {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
and so on for all the crimes.
Hope that helped :)