（无限）CSS关键帧动画可以在特定时间点或定义的关键帧处停止吗？

时间：2019-05-30 15:24:45

标签： javascript css

我正在尝试确定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';">

3 个答案:

答案 0 :(得分：3)

您可以使用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()">

答案 1 :(得分：2)

您可能需要考虑调整animation play state而不是迭代次数。这将使您可以在所需的位置停止动画，但不能将其重置为开始。

function play() {
  let target = document.getElementById('wrap')
  target.style.animationPlayState = 'running'
  let styles = getComputedStyle(target)
  console.log(styles.getPropertyValue('animation-play-state'))
}

function pause() {
  let target = document.getElementById('wrap')
  target.style.animationPlayState = 'paused'
  let styles = getComputedStyle(target)
  console.log(styles.getPropertyValue('animation-play-state'))
}
#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: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

@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'>
  <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()">

编辑：

如果要访问有关组件的计算样式的信息，则可以使用getComputedStyle function。这将在Javascript中提供有关元素的所有计算样式的信息。从getComputedStyle返回的值可以与getPropertyValue function一起使用，以提供有关特定属性的信息。

答案 2 :(得分：0)

到目前为止，这非常有用，但是剩下的问题与这些答案有关：

我添加了window.getComputedStyle(wrap, null).getPropertyValue("transform")并将其写入输出字段。这将返回动画的矩阵状态。应该如何解释矩阵以知道在什么旋转度或什么关键帧被暂停？我在矩阵中找到了4个float值。有些值似乎总是相同，或者是另一个值的负值。所以我想我可以用这些值计算回毫秒吗？

或者也许还有一个getComputedStyle()可以读取的不同属性，这使得它更简单了？

我已将片段摘录移至新的更详细的问题，网址为：How can an animation keyframe or time offset be calculated from a CSS transform matrix?

相关问题
最新问题