如何防止元素回到初始状态？

Question

我正在学习动画，我想制作一个两步动画：1. 元素掉落 2. 点击时它们开始跳动。 不幸的是，点击后元素会回到它们的初始位置（在下降动画之前）。我究竟做错了什么？ 下面是 Codepen 中的一个示例： https://codepen.io/ju-rat/pen/VwMbZVL?editors=1010

代码如下：

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>

Answer 1

您用pulse 0.5s linear 覆盖fall 2s ease-out，因此，与fall 相关的所有内容都会丢失。

据我所知，没有办法将两种效果（脉冲和下降）结合在一个 CSS 动画中。这是一个或另一个，但我可能在这里错了。至少，您可以作弊并在每个灯泡内放置一个子元素，并对其应用脉冲效果而不是灯泡本身：

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>

（注意：我还清理了你的 CSS，减少了重复等）

Answer 2

您好像忘记添加transform: translateY(400%) translateX(100%); 进入这里的脉动动画

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>