CODEWITHSUNDEEP
csssasscss-animations
DarkCeptor44
DarkCeptor44

Reputation: 314

Is there a way to pause a specific CSS3 animation

I want to do something like the code below does but instead of having it "teleport" to the center I wish I could pause just one animation and keep the others running, in other words the element should stop wherever it is because the pass animation is paused, but the anim and force-stop animations should start running.

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>

I tried using animation-play-state but it pauses all animations. Also I would prefer to do this in pure SCSS/CSS3 if possible but if there is a simple way to do it in JavaScript or jQuery it's acceptable too. Thanks in advance!

UPDATE: I've made some janky styles in that snippet so unfortunately it only works in full-page.

Upvotes: 1

Views: 799

Answers (1)

Temani Afif
Temani Afif

Reputation: 273750

Consider animation-play-state by simply writing:

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

Full code

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>

Upvotes: 3

Related Questions