有没有办法暂停特定的 CSS3 动画答案

【问题标题】：Is there a way to pause a specific CSS3 animation有没有办法暂停特定的 CSS3 动画
【发布时间】：2020-04-15 22:27:42
【问题描述】：

我想做一些类似下面代码的事情，但不是让它“传送”到中心，我希望我可以只暂停一个动画并保持其他动画运行，换句话说，元素应该在任何地方停止，因为pass 动画已暂停，但 anim 和 force-stop 动画应该开始运行。

body {
  background: #121212;
  overflow: hidden;
}

.input {
  transition: 100ms ease;
  position: relative;
  width: 100px;
  height: 100px;
  background: transparent;
  border: 1.2px solid #383838;
  border-radius: 10px;
  margin: 0 auto;
  top: 200px;
  text-align: center;
}
.input .blaster {
  position: absolute;
  transition: 100ms ease;
  background: #fff;
  width: 100px;
  height: 10px;
  margin: 30% auto;
  filter: blur(3px);
  border-radius: 50%;
  animation: anim 2s ease infinite,pass 500ms linear infinite;
  top: -150px;
}
.input > span {
  transition: 100ms ease;
  position: relative;
  top: 40px;
  color: #aaa;
}
.input:hover {
  animation: move 100ms ease infinite;
  border-color: #eee;
  background-color: #272727;
}
.input:hover > .blaster {
  animation: anim 2s ease infinite,move 100ms ease infinite;
}
.input:hover > span {
  color: transparent;
}

@keyframes anim {
  from {
    box-shadow: 0 0 5px 2px #fff,0px 0px 10px 3px #f33,0 0 15px 3px #f33;
  }
  50% {
    box-shadow: 0 0 5px 2px #fff,0px 0px 16px 3px #f33,0 0 15px 5px #f33;
  }
  to {
    box-shadow: 0 0 5px 2px #fff,0px 0px 10px 3px #f33,0 0 15px 3px #f33;
  }
}
@keyframes pass {
  from {
    transform: translateX(-600px);
  }
  to {
    transform: translateX(600px);
  }
}
@keyframes move {
  from {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(2.24px);
  }
  75% {
    transform: translateX(-1.75px);
  }
  to {
    transform: translateX(0px);
  }
}

<div class="input">
  <span>Hover me</span>
  <div class="blaster"></div>
</div>

我尝试使用animation-play-state，但它会暂停所有动画。如果可能的话，我更愿意在纯 SCSS/CSS3 中执行此操作，但如果有一种简单的方法可以在 JavaScript 或 jQuery 中执行此操作，它也是可以接受的。提前致谢！

更新：我在那个 sn-p 中制作了一些 janky 样式，所以不幸的是它只能在整页中使用。

【问题讨论】：

您是否考虑过将其设置为非常非常慢的速度来模拟暂停，然后在您希望它重新开始时将其设置为正常的动画速度？

标签： css sass css-animations

【解决方案1】：

通过简单的写作考虑animation-play-state：

.input:hover > .blaster {
  animation-play-state:running,paused;
}

完整代码

body {
  background: #121212;
  overflow: hidden;
}

.input {
  transition: 100ms ease;
  position: relative;
  width: 100px;
  height: 100px;
  background: transparent;
  border: 1.2px solid #383838;
  border-radius: 10px;
  margin: 0 auto;
  top: 200px;
  text-align: center;
}
.input .blaster {
  position: absolute;
  transition: 100ms ease;
  background: #fff;
  width: 100px;
  height: 10px;
  margin: 30% auto;
  filter: blur(3px);
  border-radius: 50%;
  animation: anim 2s ease infinite,pass 500ms linear infinite;
  top: -150px;
}
.input > span {
  transition: 100ms ease;
  position: relative;
  top: 40px;
  color: #aaa;
}
.input:hover {
  animation: move 100ms ease infinite;
  border-color: #eee;
  background-color: #272727;
}
.input:hover > .blaster {
  animation-play-state:running,paused;
}
.input:hover > span {
  color: transparent;
}

@keyframes anim {
  from {
    box-shadow: 0 0 5px 2px #fff,0px 0px 10px 3px #f33,0 0 15px 3px #f33;
  }
  50% {
    box-shadow: 0 0 5px 2px #fff,0px 0px 16px 3px #f33,0 0 15px 5px #f33;
  }
  to {
    box-shadow: 0 0 5px 2px #fff,0px 0px 10px 3px #f33,0 0 15px 3px #f33;
  }
}
@keyframes pass {
  from {
    transform: translateX(-600px);
  }
  to {
    transform: translateX(600px);
  }
}
@keyframes move {
  from {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(2.24px);
  }
  75% {
    transform: translateX(-1.75px);
  }
  to {
    transform: translateX(0px);
  }
}

<div class="input">
  <span>Hover me</span>
  <div class="blaster"></div>
</div>

【讨论】：