Question

我想做下面的代码一样的事情，但是我不想让它“传送”到中心，而是希望我可以只暂停一个动画并保持其他动画的运行，换句话说，元素应该在任何地方停止，因为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中执行此操作，那也是可以接受的。预先感谢！

更新：我在该代码段中做了一些怪异的样式，因此很遗憾，它只能在整页中使用。

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

有没有一种方法可以暂停特定的CSS3动画

1 个答案: