How to have 3 #keyframes fill's on the same page? - css

Question

I am trying to get three keyframes to work independently from each other
I have added some HTML and CSS on a friends codepen account to show you.
https://codepen.io/williamharvey/pen/JjJjRdz
I have three circular dials that have the following.
.circle-wrap .circle .fill {
animation: fill ease-in-out 3s;
transform: rotate(45deg);
}
#keyframes fill {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
But I want the second dial to be 65deg
.circle-wrap .circle .fill {
animation: fill ease-in-out 3s;
transform: rotate(65deg);
}
#keyframes fill {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(65deg);
}
}
and the third 95deg
.circle-wrap .circle .fill {
animation: fill ease-in-out 3s;
transform: rotate(95deg);
}
#keyframes fill {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(95deg);
}
}
Is this even possible?
Thanks in advance.

Answer 1

short answser: Yes.
You can use the forwards (keyword) to freeze your animation on its ending value, and CSS var() to apply specific values from different elements but from a single rule :
example from your code :
.circle-wrap {
margin: 50px auto;
width: 240px;
height: 240px;
background: #e5e5e5;
border-radius: 50%;
transform: rotate(-125deg);
}
.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
width: 240px;
height: 240px;
position: absolute;
border-radius: 50%;
}
.circle-wrap .circle .mask {
clip: rect(0px, 240px, 240px, 120px);
}
.circle-wrap .circle .mask .fill {
clip: rect(0px, 120px, 240px, 0px);
background-color: #ffe100;
}
.circle-wrap .circle .mask.full,
.circle-wrap .circle .fill {
animation: fill ease-in-out 3s forwards;
}
#keyframes fill {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate( var(--rt));
}
}
.circle-wrap .inside-circle {
width: 185px;
height: 185px;
border-radius: 50%;
background: #fff;
line-height: 185px;
text-align: center;
top: 28px;
left: 28px;
z-index: 100;
font-weight: 700;
font-size: 6.5rem;
letter-spacing: -4px;
transform: rotate(114deg);
font-style: italic;
font-family: brandon-grotesque;
padding: 0;
position: relative;
}
.circle-wrap .inside-circle span {
font-size: 2.5rem;
letter-spacing: 0;
}
.circle-wrap .inside-circle .cone {
width: 0;
height: 0;
border-left: 175px solid transparent;
border-right: 175px solid transparent;
border-top: 125px solid white;
border-radius: 50%;
transform: rotate(192deg);
position: absolute;
bottom: -33px;
left: -96px;
z-index: -1;
}
.circle-wrap .inside-circle .cone .dial-speeds {
transform: rotate(179deg);
position: relative;
z-index: 1;
font-weight: 400;
font-style: normal;
}
.circle-wrap .inside-circle .cone .dial-speeds .left {
position: absolute;
bottom: -78px;
width: 18px;
height: 20px;
left: -50px;
}
.circle-wrap .inside-circle .cone .dial-speeds .right {
position: absolute;
bottom: -78px;
width: 18px;
height: 20px;
right: -50px;
}
.circle-wrap .inside-circle .cone .dial-speeds .right span {
right: -16px;
top: -58px;
position: absolute;
font-size: 15px;
}
.circle-wrap .inside-circle .cone .dial-speeds .left span {
left: -16px;
top: -58px;
position: absolute;
font-size: 15px;
}
<div class="grid gap-4 grid-cols-3 text-left pt-24">
<div class="circle-wrap">
<div class="circle">
<div class="mask full">
<div class="fill fill"></div>
</div>
<div class="mask half">
<div class="fill fill" style="--rt:45deg"></div>
</div>
<div class="inside-circle">
300<span></span>
<div class="cone">
<div class="dial-speeds">
<div class="left">
<img src="">
<span>300</span>
</div>
<div class="right">
<img src="">
<span>100</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="circle-wrap">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill" style="--rt:60deg"></div>
</div>
<div class="inside-circle">
500<span></span>
<div class="cone">
<div class="dial-speeds">
<div class="left">
<img src="">
<span>500</span>
</div>
<div class="right">
<img src="">
<span>200</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="circle-wrap">
<div class="circle">
<div class="mask full">
<div class="fill" style="--rt:95deg"></div>
</div>
<div class="mask half">
<div class="fill"></div>
</div>
<div class="inside-circle">
900<span></span>
<div class="cone">
<div class="dial-speeds">
<div class="left">
<img src="">
<span>900</span>
</div>
<div class="right">
<img src="">
<span>300</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Ressources :
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode look at forwards
https://developer.mozilla.org/en-US/docs/Web/CSS/var()