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