javascript - 可以(无休止的)CSS 关键帧动画在特定时间点或定义的关键帧停止吗？

Question

我想知道今天的 CSS 是否提供了足够的工具来让动画运行直到事件告诉他们停止？

是的，这是可能的，但是请参阅代码段:

如果中间停止，这个动画会跳到最后。我想知道它是否可以在计算关键帧的任何特定点停止。所以基本上就像命运之轮一样，不断旋转 DIV 直到它停止，当停止时倒置保持倒置直到可能重新启动？

片段:

#wrap {
  background-color: yellow;
  position: relative;
  top: 0px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  box-sizing: border-box;
  transition: 700ms linear;
  animation-iteration-count: infinite;
}

#wrap:hover {
  background-color: orange;
}

#mouth {
  background-color: transparent;
  position: absolute;
  border-left: 4px solid black;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  border-radius: 0 0 60px 60px;
  height: 30px;
  width: 60px;
  top: 52px;
  left: 20px;
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
  padding: 0;
}

#left-eye {
  position: absolute;
  background-color: black;
  border-radius: 50%;
  width: 8px;
  height: 16px;
  box-sizing: border-box;
  left: 30px;
  top: 25px;
  display: inline-block;
  overflow: hidden;
  padding: 0;
}

#right-eye {
  position: absolute;
  background-color: black;
  border-radius: 50%;
  width: 8px;
  height: 16px;
  box-sizing: border-box;
  top: 25px;
  right: 30px;
  display: inline-block;
  overflow: hidden;
  padding: 0;
}

@keyframes rotateDiv {
  from {
  -ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Safari */
  transform: rotate(0deg);
  }

  to {
  -ms-transform: rotate(360deg); /* IE 9 */
  -webkit-transform: rotate(360deg); /* Safari */
  transform: rotate(360deg);
  }
}

#wrap {
  animation-duration: 1200ms;
  animation-name: rotateDiv;
  animation-iteration-count: 0;
  animation-timing-function: linear;
}

<div id='wrap'>
  <div id='left-eye'>
    &nbsp;
  </div>
  <div id='right-eye'>
    &nbsp;
  </div>
  <div id='mouth'>
    &nbsp;
  </div>
</div>
<input type='button' value='start' onClick="document.getElementById('wrap').style.animationIterationCount = 'infinite';">
<input type='button' value='stop' onClick="document.getElementById('wrap').style.animationIterationCount = '0';">

Answer 1

您可以使用 animation-play-state 和切换类来暂停和恢复 CSS 动画:

CSS:

.paused {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

片段:

function pause() {
    wrap.classList.add("paused");
}

function play() {
    wrap.classList.remove("paused");
}

.paused {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

#wrap {
  background-color: yellow;
  position: relative;
  top: 0px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  box-sizing: border-box;
  transition: 700ms linear;
  animation-iteration-count: infinite;
}

#wrap:hover {
  background-color: orange;
}

#mouth {
  background-color: transparent;
  position: absolute;
  border-left: 4px solid black;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  border-radius: 0 0 60px 60px;
  height: 30px;
  width: 60px;
  top: 52px;
  left: 20px;
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
  padding: 0;
}

#left-eye {
  position: absolute;
  background-color: black;
  border-radius: 50%;
  width: 8px;
  height: 16px;
  box-sizing: border-box;
  left: 30px;
  top: 25px;
  display: inline-block;
  overflow: hidden;
  padding: 0;
}

#right-eye {
  position: absolute;
  background-color: black;
  border-radius: 50%;
  width: 8px;
  height: 16px;
  box-sizing: border-box;
  top: 25px;
  right: 30px;
  display: inline-block;
  overflow: hidden;
  padding: 0;
}

#wrap {
  animation-duration: 1200ms;
  animation-name: rotateDiv;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotateDiv {
  from {
  -ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Safari */
  transform: rotate(0deg);
  }

  to {
  -ms-transform: rotate(360deg); /* IE 9 */
  -webkit-transform: rotate(360deg); /* Safari */
  transform: rotate(360deg);
  }
}

<div id = "wrap" class = "paused">
  <div id = "left-eye">&nbsp;</div>
  <div id = "right-eye">&nbsp;</div>
  <div id = "mouth">&nbsp;</div>
</div>
<input type = "button" value = "start" onClick = "play()">
<input type = "button" value = "stop" onClick = "pause()">