How to have 3 @keyframes fill's on the same page?

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.

Solution

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 :