如何在同一页面上填充 3 个 @keyframes？

Question

我正在尝试让三个关键帧彼此独立工作

我在朋友的 codepen 帐户上添加了一些 HTML 和 CSS 给你看。

https://codepen.io/williamharvey/pen/JjJjRdz

我有三个圆形表盘，它们具有以下功能。

.circle-wrap .circle .fill {
  animation: fill ease-in-out 3s;
  transform: rotate(45deg);
}

@keyframes fill  {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(45deg);
  }
}

但我希望第二个刻度盘是 65 度

.circle-wrap .circle .fill {
  animation: fill ease-in-out 3s;
  transform: rotate(65deg);
}

@keyframes fill  {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(65deg);
  }
}

还有第三个95度

.circle-wrap .circle .fill {
  animation: fill ease-in-out 3s;
  transform: rotate(95deg);
}

@keyframes fill  {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(95deg);
  }
}

这可能吗？

提前致谢。

Answer 1

简短的回答：是的。

您可以使用 forwards（关键字）将动画冻结在其结束值上，并使用 CSS var() 应用来自不同元素但来自单个规则的特定值：

您的代码示例：

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

资源：

• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode看forwards

• https://developer.mozilla.org/en-US/docs/Web/CSS/var()