Hey there, I'm currently experimenting with animation and trying to create a cool two-step effect: 1. elements falling down and 2. pulsating on click. However, I've run into an issue where after the clicking action, the elements return to their original positions before the falling animation. Any ideas on what I might be missing? Have a look at this example on Codepen: https://codepen.io/ju-rat/pen/VwMbZVL?editors=1010
Let's take a peek at 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>