How to prevent elements going back to their initial state?

user_15040447 0
Viewed 48

I'm learning animation and I want to make a two-step animation: 1. elements fall down 2. on click they start pulsating. Unfortunately, after the click the elements go back to their initial positions (before the falling-down animation). What am I doing wrong? Here is an example in Codepen: https://codepen.io/ju-rat/pen/VwMbZVL?editors=1010

Here is the code:

function pulsation() {
  var elem = document.getElementsByClassName("bulb");
  elem[0].style.animation = "pulse 0.5s linear infinite 0s alternate";
  elem[1].style.animation = "pulse 1s linear infinite 2s alternate";
  elem[2].style.animation = "pulse 0.5s linear infinite 0s alternate";
  elem[3].style.animation = "pulse 1s linear infinite 2s alternate";
}
html {
  background-color: rgba(171, 183, 183);
}

* {
  margin: 10px;
}

#container {
  width: 100%;
  display: flex;
}

#b1 {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  background-color: red;
}

#b2 {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: yellow;
  filter: none;
}

#b3 {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: green;
  filter: none;
}

#b4 {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: blue;
  filter: none;
}

#b2 {
  animation: fall2 1s ease-out;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

@keyframes fall2 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(400%);
  }
}

#b3 {
  animation: fall 2s ease-out;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes fall {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(400%) translateX(100%);
  }
}

@keyframes pulse {
  0% {
    filter: none;
  }
  50% {
    filter: brightness(80%) drop-shadow(0px 1px 14px rgba(224, 231, 34));
  }
  100% {
    filter: brightness(140%) drop-shadow(0px 1px 14px rgba(251, 255, 255));
  }
}


}
<div id=c ontainer>
  <div class="bulb" id="b1" onclick="pulsation()"></div>
  <div class="bulb" id="b2"></div>
  <div class="bulb" id="b3"></div>
  <div class="bulb" id="b4"></div>
</div>
<p>Click on the red circle</p>

css-animations animation javascript
2 Answers

You overwrite fall 2s ease-out with pulse 0.5s linear, so, everything related to fall is lost.

As far as I know, there is no way to combine both effects (pulse and fall) in one CSS animation. It's one or the other, but I might be wrong here. At least, you can cheat and place a child element inside each bulb, and apply the pulse effect to it instead of the bulb itself :

function pulsation() {
  var elem = document.getElementsByClassName("bulb");
  elem[0].children[0].style.animation = "pulse 0.5s linear infinite 0s alternate";
  elem[1].children[0].style.animation = "pulse 1s linear infinite 2s alternate";
  elem[2].children[0].style.animation = "pulse 0.5s linear infinite 0s alternate";
  elem[3].children[0].style.animation = "pulse 1s linear infinite 2s alternate";
}
html {
  background-color: rgba(171, 183, 183);
}

* {
  margin: 10px;
}

#container {
  width: 100%;
  display: flex;
}

.bulb {
  position: relative;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

#b1 {
  background-color: red;
}

#b2 {
  background-color: yellow;
  filter: none;
  animation: fall2 1s ease-out;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

#b3 {
  background-color: green;
  filter: none;
  animation: fall 2s ease-out;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

#b4 {
  background-color: blue;
  filter: none;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  border-radius: 50%;
  margin: 0;
}

@keyframes fall2 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(400%);
  }
}

@keyframes fall {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(400%) translateX(100%);
  }
}

@keyframes pulse {
  0% {
    filter: none;
  }
  50% {
    filter: brightness(80%) drop-shadow(0px 1px 14px rgba(224, 231, 34));
  }
  100% {
    filter: brightness(140%) drop-shadow(0px 1px 14px rgba(251, 255, 255));
  }
}
<div id=c ontainer>
  <div class="bulb" id="b1" onclick="pulsation()">
    <div class="inner"></div>
  </div>
  <div class="bulb" id="b2">
    <div class="inner"></div>
  </div>
  <div class="bulb" id="b3">
    <div class="inner"></div>
  </div>
  <div class="bulb" id="b4">
    <div class="inner"></div>
  </div>
</div>
<p>Click on the red circle</p>

(Note: I have also cleaned up your CSS, reduced repetitions, etc)

user_10217030

Looks like you forgot to add transform: translateY(400%) translateX(100%); into the pulsing animation here you go

function pulsation() {
  var elem = document.getElementsByClassName("bulb");
  elem[0].style.animation = "pulse 0.5s linear infinite 0s alternate";
  elem[1].style.animation = "pulse 1s linear infinite 2s alternate";
  elem[2].style.animation = "pulse 0.5s linear infinite 0s alternate";
  elem[3].style.animation = "pulse 1s linear infinite 2s alternate";
}
html {
  background-color: rgba(171, 183, 183);
}

* {
  margin: 10px;
}

#container {
  width: 100%;
  display: flex;
}

#b1 {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  background-color: red;
}

#b2 {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: yellow;
  filter: none;
}

#b3 {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: green;
  filter: none;
  
}

#b4 {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: blue;
  filter: none;
}

#b2 {
  animation: fall2 1s ease-out;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

@keyframes fall2 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(400%);
  }
}

#b3 {
  animation: fall 2s ease-out;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes fall {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(400%) translateX(100%);
  }
}

@keyframes pulse {
  0% {
    filter: none;
    transform: translateY(400%) translateX(100%);
  }
  50% {
    filter: brightness(80%) drop-shadow(0px 1px 14px rgba(224, 231, 34));
    transform: translateY(400%) translateX(100%);
  }
  100% {
    filter: brightness(140%) drop-shadow(0px 1px 14px rgba(251, 255, 255));
    transform: translateY(400%) translateX(100%);
  }
}


}
<div id=c ontainer>
  <div class="bulb" id="b1" onclick="pulsation()"></div>
  <div class="bulb" id="b2"></div>
  <div class="bulb" id="b3"></div>
  <div class="bulb" id="b4"></div>
</div>
<p>Click on the red circle</p>

user_142241800
Related