html - 无法在最后卡住 css 动画

Question

我有一个我想在结束时停止的 CSS 动画，但它返回到初始状态，尽管我使用的是“animation-fill-mode: forwards;”。请任何人，动画最初是无限的，所以我将迭代计数设置为 1，但现在它在运行一次后重置。

这是我正在尝试调整的 Codepen 的链接 https://codepen.io/donovanh/pen/GgYEBZ

body {
  background: #fff;
}

.watch {
  background: #000 url(https://cssanimation.rocks/assets/images/posts/watch/watchbg.jpg) no-repeat;
  background-size: 100%;
  font-family: "San Francisco Display UltraLight", "Open Sans", Helvetica, Arial, Serif;
  font-size: 32px;
  width: 440px;
  height: 487px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.screen {
  width: 59.2%;
  height: 74%;
  position: absolute;
  left: 18%;
  top: 13%;
  /**** DIAL 1 ****/
  /**** DIAL 2 ****/
  /**** DIAL 3 ****/
}
.screen .title, .screen .time {
  animation: show-title 5s 1 ease-out forwards;
  color: #b1b4c2;
  font-size: 0.9em;
  position: absolute;
  top: 0;
  left: 0;
  letter-spacing: 0.05em;
}
.screen .time {
  animation-delay: 0.2s;
  right: 0;
  left: auto;
}
.screen .dials {
  animation: show-dials 5s 1 ease-out forwards;
  animation-fill-mode: forwards;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  position: absolute;
  top: 1.75em;
  left: 0;
}
.screen .dial {
  border: 1px solid #000;
  border-radius: 50%;
}
.screen .dial.move {
  position: absolute;
  width: 8em;
  height: 8em;
}
.screen .dial.move::before {
  background: url(https://cssanimation.rocks/assets/images/posts/watch/1.png) no-repeat center;
  background-size: 50%;
  content: "";
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top: -0.29em;
  left: calc(50% - 0.75em);
  z-index: 10;
}
.screen .dial.move::after {
  content: "";
  background: #000;
  border-radius: 50%;
  width: 6em;
  height: 6em;
  position: absolute;
  top: 1em;
  left: 1em;
}
.screen .dial.move .dial-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4em;
  overflow: hidden;
}
.screen .dial.move .wedge {
  width: 4em;
  height: 8em;
  position: absolute;
  top: 0;
  left: 0;
}
.screen .dial.move .container1 {
  left: 4em;
}
.screen .dial.move .container1 .wedge {
  animation: rotate-bg-dial-1-1 5s 0.2s linear 1 forwards;
  border-radius: 8em 0 0 8em;
  background: #fc1d20;
  left: -4em;
  transform-origin: 100% 50%;
}
.screen .dial.move .container2 {
  left: 0;
}
.screen .dial.move .container2 .wedge {
  animation: rotate-bg-dial-1-2 5s 0.2s linear 1 forwards;
  background: #fc1d20;
  border-radius: 0 8em 8em 0;
  transform-origin: 0 50%;
  left: 4em;
}
.screen .dial.move .marker {
  width: 1em;
  height: 1em;
  background: #fc1d20;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: calc(50% - 0.5em);
}
.screen .dial.move .end {
  animation: rotate-marker-dial-1 5s 0.2s linear 1 forwards;
  transform-origin: 50% 4em;
}
.screen .dial.exercise {
  position: absolute;
  width: 6em;
  height: 6em;
  top: 1em;
  left: 1em;
}
.screen .dial.exercise::before {
  background: url(https://cssanimation.rocks/assets/images/posts/watch/2.png) no-repeat center;
  background-size: 50%;
  content: "";
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top: -0.29em;
  left: calc(50% - 0.75em);
  z-index: 10;
}
.screen .dial.exercise::after {
  content: "";
  background: #000;
  border-radius: 50%;
  width: 4em;
  height: 4em;
  position: absolute;
  top: 1em;
  left: 1em;
}
.screen .dial.exercise .dial-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3em;
  overflow: hidden;
}
.screen .dial.exercise .wedge {
  border-radius: 50%;
  width: 3em;
  height: 6em;
  position: absolute;
}
.screen .dial.exercise .container1 {
  left: 3em;
}
.screen .dial.exercise .container1 .wedge {
  animation: rotate-bg-dial-2-1 5s .5s linear 1 forwards;
  border-radius: 8em 0 0 8em;
  position: absolute;
  background: #9cfc33;
  left: -3em;
  transform-origin: 100% 50%;
}
.screen .dial.exercise .marker {
  width: 1em;
  height: 1em;
  background: #9cfc33;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: calc(50% - 0.48em);
}
.screen .dial.exercise .end {
  animation: rotate-marker-dial-2 5s .5s linear 1 forwards;
  transform-origin: 45% 3em;
}
.screen .dial.stand {
  position: absolute;
  width: 4em;
  height: 4em;
  top: 2em;
  left: 2em;
}
.screen .dial.stand::before {
  background: url(https://cssanimation.rocks/assets/images/posts/watch/3.png) no-repeat center;
  background-size: 50%;
  content: "";
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top: -0.28em;
  left: calc(50% - 0.75em);
  z-index: 10;
}
.screen .dial.stand::after {
  content: "";
  background: #000;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  position: absolute;
  top: 1em;
  left: 1em;
}
.screen .dial.stand .dial-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4em;
  overflow: hidden;
}
.screen .dial.stand .wedge {
  border-radius: 50%;
  width: 2em;
  height: 4em;
  position: absolute;
}
.screen .dial.stand .container1 {
  left: 2em;
}
.screen .dial.stand .container1 .wedge {
  position: absolute;
  animation: rotate-bg-dial-3-1 5s 0.5s linear 1 forwards;
  background: #32cbd4;
  border-radius: 8em 0 0 8em;
  left: -2em;
  transform-origin: 100% 50%;
}
.screen .dial.stand .marker {
  width: 1em;
  height: 1em;
  background: #32cbd4;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: calc(50% - 0.5em);
}
.screen .dial.stand .end {
  animation: rotate-marker-dial-3 5s 0.5s linear 1 forwards;
  transform-origin: 50% 2em;
}
.screen .dial-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
}
.screen .dial-background.one {
  background: #400818;
}
.screen .dial-background.two {
  background: #2d400c;
}
.screen .dial-background.three {
  background: #163d3b;
}

.pips {
  animation: show-dials 5s 0.1s 1 ease-out forwards;
  position: absolute;
  bottom: 0;
  left: calc(50% - 1em);
  width: 2em;
}
.pips div {
  width: 0.25em;
  height: 0.25em;
  background-color: #353535;
  border-radius: 50%;
  display: inline-block;
  margin: 0 0.02em;
}
.pips div:first-child {
  background-color: #fff;
}

/** Animations **/
@keyframes rotate-marker-dial-1 {
  0%, 6% {
    transform: none;
  }
  28%, 94% {
    transform: rotateZ(220deg);
  }
  95%, 100% {
    transform: none;
  }
}
@keyframes rotate-bg-dial-1-1 {
  0%, 6% {
    transform: rotateZ(0);
  }
  24%, 94% {
    transform: rotateZ(180deg);
  }
  95%, 100% {
    transform: rotateZ(0);
  }
}
@keyframes rotate-bg-dial-1-2 {
  24% {
    transform: rotateZ(0);
  }
  28%, 94% {
    transform: rotateZ(40deg);
  }
  95%, 100% {
    transform: rotateZ(0);
  }
}
@keyframes rotate-marker-dial-2 {
  20%, 90% {
    transform: rotateZ(160deg);
  }
  91%, 100% {
    transform: none;
  }
}
@keyframes rotate-bg-dial-2-1 {
  0%, 0.5% {
    transform: none;
  }
  19%, 90% {
    transform: rotateZ(160deg);
  }
  91%, 100% {
    transform: none;
  }
}
@keyframes rotate-marker-dial-3 {
  19%, 90% {
    transform: rotateZ(90deg);
  }
  91%, 100% {
    transform: none;
  }
}
@keyframes rotate-bg-dial-3-1 {
  0%, 1% {
    transform: none;
  }
  19%, 90% {
    transform: rotateZ(90deg);
  }
  91%, 100% {
    transform: none;
  }
}

<section class="demo-container watch-container">
  <article class="watch">
    <div class="bg-image"></div>
    <div class="screen">
      <header>
        <span class="title">Activity</span>
        <span class="time">10:09</span>
      </header>
      <section class="dials">
        <div class="dial move">
          <div class="dial-background one"></div>
          <div class="dial-container container1">
            <div class="wedge"></div>
          </div>
          <div class="dial-container container2">
            <div class="wedge"></div>
          </div>
          <div class="marker start"></div>
          <div class="marker end"></div>
        </div>
        <div class="dial exercise">
          <div class="dial-background two"></div>
          <div class="dial-container container1">
            <div class="wedge"></div>
          </div>
          <div class="marker start"></div>
          <div class="marker end"></div>
        </div>
        <div class="dial stand">
          <div class="dial-background three"></div>
          <div class="dial-container container1">
            <div class="wedge"></div>
          </div>
          <div class="marker start"></div>
          <div class="marker end"></div>
        </div>
      </section>
      <section class="pips">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </section>
    </div>
  </article>
</section>

Answer 1

每个 @keyframes 动画都有一个最终的“关键帧”，它在完成之前重置回初始“状态”。这是围绕 91%、100% 的动画。移除每个动画的“重置”部分，让正常的动画关键帧在 100% 处结束。

body {
  background: #fff;
}

.watch {
  background: #000 url(https://cssanimation.rocks/assets/images/posts/watch/watchbg.jpg) no-repeat;
  background-size: 100%;
  font-family: "San Francisco Display UltraLight", "Open Sans", Helvetica, Arial, Serif;
  font-size: 32px;
  width: 440px;
  height: 487px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.screen {
  width: 59.2%;
  height: 74%;
  position: absolute;
  left: 18%;
  top: 13%;
  /**** DIAL 1 ****/
  /**** DIAL 2 ****/
  /**** DIAL 3 ****/
}
.screen .title, .screen .time {
  animation: show-title 5s 1 ease-out forwards;
  color: #b1b4c2;
  font-size: 0.9em;
  position: absolute;
  top: 0;
  left: 0;
  letter-spacing: 0.05em;
}
.screen .time {
  animation-delay: 0.2s;
  right: 0;
  left: auto;
}
.screen .dials {
  animation: show-dials 5s 1 ease-out forwards;
  animation-fill-mode: forwards;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  position: absolute;
  top: 1.75em;
  left: 0;
}
.screen .dial {
  border: 1px solid #000;
  border-radius: 50%;
}
.screen .dial.move {
  position: absolute;
  width: 8em;
  height: 8em;
}
.screen .dial.move::before {
  background: url(https://cssanimation.rocks/assets/images/posts/watch/1.png) no-repeat center;
  background-size: 50%;
  content: "";
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top: -0.29em;
  left: calc(50% - 0.75em);
  z-index: 10;
}
.screen .dial.move::after {
  content: "";
  background: #000;
  border-radius: 50%;
  width: 6em;
  height: 6em;
  position: absolute;
  top: 1em;
  left: 1em;
}
.screen .dial.move .dial-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4em;
  overflow: hidden;
}
.screen .dial.move .wedge {
  width: 4em;
  height: 8em;
  position: absolute;
  top: 0;
  left: 0;
}
.screen .dial.move .container1 {
  left: 4em;
}
.screen .dial.move .container1 .wedge {
  animation: rotate-bg-dial-1-1 5s 0.2s linear 1 forwards;
  border-radius: 8em 0 0 8em;
  background: #fc1d20;
  left: -4em;
  transform-origin: 100% 50%;
}
.screen .dial.move .container2 {
  left: 0;
}
.screen .dial.move .container2 .wedge {
  animation: rotate-bg-dial-1-2 5s 0.2s linear 1 forwards;
  background: #fc1d20;
  border-radius: 0 8em 8em 0;
  transform-origin: 0 50%;
  left: 4em;
}
.screen .dial.move .marker {
  width: 1em;
  height: 1em;
  background: #fc1d20;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: calc(50% - 0.5em);
}
.screen .dial.move .end {
  animation: rotate-marker-dial-1 5s 0.2s linear 1 forwards;
  transform-origin: 50% 4em;
}
.screen .dial.exercise {
  position: absolute;
  width: 6em;
  height: 6em;
  top: 1em;
  left: 1em;
}
.screen .dial.exercise::before {
  background: url(https://cssanimation.rocks/assets/images/posts/watch/2.png) no-repeat center;
  background-size: 50%;
  content: "";
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top: -0.29em;
  left: calc(50% - 0.75em);
  z-index: 10;
}
.screen .dial.exercise::after {
  content: "";
  background: #000;
  border-radius: 50%;
  width: 4em;
  height: 4em;
  position: absolute;
  top: 1em;
  left: 1em;
}
.screen .dial.exercise .dial-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3em;
  overflow: hidden;
}
.screen .dial.exercise .wedge {
  border-radius: 50%;
  width: 3em;
  height: 6em;
  position: absolute;
}
.screen .dial.exercise .container1 {
  left: 3em;
}
.screen .dial.exercise .container1 .wedge {
  animation: rotate-bg-dial-2-1 5s .5s linear 1 forwards;
  border-radius: 8em 0 0 8em;
  position: absolute;
  background: #9cfc33;
  left: -3em;
  transform-origin: 100% 50%;
}
.screen .dial.exercise .marker {
  width: 1em;
  height: 1em;
  background: #9cfc33;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: calc(50% - 0.48em);
}
.screen .dial.exercise .end {
  animation: rotate-marker-dial-2 5s .5s linear 1 forwards;
  transform-origin: 45% 3em;
}
.screen .dial.stand {
  position: absolute;
  width: 4em;
  height: 4em;
  top: 2em;
  left: 2em;
}
.screen .dial.stand::before {
  background: url(https://cssanimation.rocks/assets/images/posts/watch/3.png) no-repeat center;
  background-size: 50%;
  content: "";
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top: -0.28em;
  left: calc(50% - 0.75em);
  z-index: 10;
}
.screen .dial.stand::after {
  content: "";
  background: #000;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  position: absolute;
  top: 1em;
  left: 1em;
}
.screen .dial.stand .dial-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4em;
  overflow: hidden;
}
.screen .dial.stand .wedge {
  border-radius: 50%;
  width: 2em;
  height: 4em;
  position: absolute;
}
.screen .dial.stand .container1 {
  left: 2em;
}
.screen .dial.stand .container1 .wedge {
  position: absolute;
  animation: rotate-bg-dial-3-1 5s 0.5s linear 1 forwards;
  background: #32cbd4;
  border-radius: 8em 0 0 8em;
  left: -2em;
  transform-origin: 100% 50%;
}
.screen .dial.stand .marker {
  width: 1em;
  height: 1em;
  background: #32cbd4;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: calc(50% - 0.5em);
}
.screen .dial.stand .end {
  animation: rotate-marker-dial-3 5s 0.5s linear 1 forwards;
  transform-origin: 50% 2em;
}
.screen .dial-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
}
.screen .dial-background.one {
  background: #400818;
}
.screen .dial-background.two {
  background: #2d400c;
}
.screen .dial-background.three {
  background: #163d3b;
}

.pips {
  animation: show-dials 5s 0.1s 1 ease-out forwards;
  position: absolute;
  bottom: 0;
  left: calc(50% - 1em);
  width: 2em;
}
.pips div {
  width: 0.25em;
  height: 0.25em;
  background-color: #353535;
  border-radius: 50%;
  display: inline-block;
  margin: 0 0.02em;
}
.pips div:first-child {
  background-color: #fff;
}

/** Animations **/
@keyframes rotate-marker-dial-1 {
  0%, 6% {
    transform: none;
  }
  28%, 100% {
    transform: rotateZ(220deg);
  }
}
@keyframes rotate-bg-dial-1-1 {
  0%, 6% {
    transform: rotateZ(0);
  }
  24%, 100% {
    transform: rotateZ(180deg);
  }
}
@keyframes rotate-bg-dial-1-2 {
  24% {
    transform: rotateZ(0);
  }
  28%, 100% {
    transform: rotateZ(40deg);
  }
}
@keyframes rotate-marker-dial-2 {
  20%, 100% {
    transform: rotateZ(160deg);
  }
}
@keyframes rotate-bg-dial-2-1 {
  0%, 0.5% {
    transform: none;
  }
  19%, 100% {
    transform: rotateZ(160deg);
  }
}
@keyframes rotate-marker-dial-3 {
  19%, 100% {
    transform: rotateZ(90deg);
  }  
}
@keyframes rotate-bg-dial-3-1 {
  0%, 1% {
    transform: none;
  }
  19%, 100% {
    transform: rotateZ(90deg);
  }
}

<section class="demo-container watch-container">
  <article class="watch">
    <div class="bg-image"></div>
    <div class="screen">
      <header>
        <span class="title">Activity</span>
        <span class="time">10:09</span>
      </header>
      <section class="dials">
        <div class="dial move">
          <div class="dial-background one"></div>
          <div class="dial-container container1">
            <div class="wedge"></div>
          </div>
          <div class="dial-container container2">
            <div class="wedge"></div>
          </div>
          <div class="marker start"></div>
          <div class="marker end"></div>
        </div>
        <div class="dial exercise">
          <div class="dial-background two"></div>
          <div class="dial-container container1">
            <div class="wedge"></div>
          </div>
          <div class="marker start"></div>
          <div class="marker end"></div>
        </div>
        <div class="dial stand">
          <div class="dial-background three"></div>
          <div class="dial-container container1">
            <div class="wedge"></div>
          </div>
          <div class="marker start"></div>
          <div class="marker end"></div>
        </div>
      </section>
      <section class="pips">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </section>
    </div>
  </article>
</section>