What strategies can be used to stop elements from reverting to their original state?

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>

javascriptanimationcss-animations

Answer №1

You replaced fall 2s ease-out with pulse 0.5s linear, resulting in the loss of anything associated with fall.

To my knowledge, it is not possible to merge both effects (pulse and fall) into a single CSS animation. It's either one or the other, though I could be mistaken. However, you can work around this by placing a child element inside each bulb and applying the pulse effect to that element 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>

(Please note: The CSS has been tidied up, repetitions have been minimized, etc)

Answer №2

Seems like the missing piece in the pulsing animation was 

transform: translateY(400%) translateX(100%);
Don't worry, I've added it for you!

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

* {
  margin: 10px;
}

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

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

#b2,
#b3,
#b4 {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  filter: none;
}

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

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

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

@keyframes fallDown {
  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="container">
  <div class="bulb" id="b1" onclick="pulseEffect()"></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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show information retrieved from fetch api

Hi there! I've been trying to fetch data from the Avascan API and display it on my HTML page, but so far, I haven't had any luck. I've experimented with using the Fetch API, JSON, and AJAX methods, but none of them seem to work for me. Do yo ...

javascriptjqueryjsonjsonpfetch-api

Postman Guide: Mastering the Evaluation of JSON Arrays

One of the features in Postman allows users to save a specific field from the response body as a variable and then utilize that variable in a subsequent call. For instance, after my initial call to the web service, the response body contains: [ { "id" ...

javascriptjsonpostman

What steps do I need to take to ensure the progress bar extends all the way to the end of the sn

I am currently facing a challenge where the progress bar line in my message queue does not reach the end of the message before it closes. I have included a brief video showcasing the issue along with the relevant code snippet. Any suggestions or ideas woul ...

javascriptcssreactjsmaterial-ui

Issue with `npm run watch` failing to compile when the data source is turned

Currently, I am faced with a challenge while working on Laravel and utilizing various node packages for development. The issue at hand is my limited internet connectivity. Every time I attempt to execute npm run watch, it refuses to initiate unless I am c ...

javascriptnode.jsnpmlaravel-5.8

What is the syntax for creating a zip function in TypeScript?

If I am looking to create a zip function: function zip(arrays){ // assume more than 1 array is given and all arrays // share the same length const len = arrays[0].length; const toReturn = new Array(len); for (let i = 0; i < len; i+ ...

javascripttypescript

Ways to analyze users who have clicked a button

After a user registers, they are automatically taken to /proto where they can view a list of animals available for adoption. However, the challenge lies in identifying the specific user who clicked the button (as this information must be associated with th ...

javascriptnode.jsmongodbexpressmongoose

Connecting to deeply nested attributes within an object using specified criteria

I apologize if the title of my query is not very descriptive, I couldn't come up with a better one. Please feel free to suggest improvements. I am currently working on developing a reusable "property grid" in Angular. My goal is to create a grid wher ...

javascriptangularjs

Struggling to get JQuery timing events to function properly?

Encountering timing issues with the events in my self-made simon memory game. Experimented with setTimeout but struggling to figure out which events to time and the appropriate duration for them to be distinguishable. $('#play').click(function( ...

javascriptjquerytiming

Opting for fetch over jQuery's ajax for making successful GET requests to an API

Recently, I found myself in a situation where I needed to convert a function that uses a remote API from returning a callback to returning a Promise. This change presented an opportunity for me to also switch from using $.ajax to fetch, since fetch already ...

javascriptjqueryajaxfetch

The callback function in JavaScript is not updating AngularJS unless it is written in shorthand form

Within an angular controller designed for user login functionality, the code snippets below are extracted from an angular-meteor tutorial: this.login = function() { Meteor.loginWithPassword(this.credentials.email, this.credentials.password, (e ...

javascriptangularjsmeteormethodsshorthand

Explore a personalized color scheme within MUI themes to enhance your design

I'm looking to customize the colors in my theme for specific categories within my application. I set up a theme and am utilizing it in my component like this: theme.tsx import { createTheme, Theme } from '@mui/material/styles' import { red ...

javascriptreactjsmaterial-ui

Encountering a problem while verifying pattern using regular expressions

I'm facing an issue when manually checking if my inputs match the specified patterns. Below is the function I am using for this check: if (!$element.attr("pattern")) return true; let pattern = $element.attr("pattern"); le ...

javascripthtmlregex

Is it possible for Response.Redirect and OnBeforeUnload to cooperate effectively?

Is there a way to detect if the server-side code has sent a Response.Redirect in an OnBeforeUnload event? I need to alert the user before they navigate away from a page, but I don't want the prompt to appear when the server redirects. I'm dealin ...

javascriptasp.netajaxdom-eventsasp.net-ajax

Troubleshooting AngularJS Get Function Failure

New to the world of AngularJS, I find myself faced with a challenge. My .NET MVC WebAPI Restful app is up and running on an IIS server. However, when I attempt to query the API using , the response I receive is: [{"Id":1,"Name":"Glenn Block","Created":"00 ...

javascriptangularjs

Cufon failing to load following an ajax call

At first, cufon is used to replace the text on the main page. However, when another page file is loaded, cufon does not apply its replacement to the newly loaded content. Why is that? I tried adding cufon.refresh(); as the last function in the chain. I c ...

javascriptjqueryajaxfontscufon

What is the process for adding images from CSS (backgrounds, etc.) to the build folder with webpack?

Trying out the file loader for processing images and adding them to my build folder. Images within HTML files successfully show up in the build, but the ones from styles do not. I've divided my webpack configuration into two separate files and use t ...

javascriptwebpackwebpack-file-loader

I am looking to dynamically insert a text field into an HTML form using jQuery or JavaScript when a specific button is clicked

This is my code snippet: <div class="rButtons"> <input type="radio" name="numbers" value="10" />10 <input type="radio" name="numbers" value="20" />20 <input type="radio" name="numbers" value="other" />other </div> ...

phpjavascriptjqueryhtmlajax

AngularJS - Import and save CSV files

I have set up a nodeJS program as the server and an AngularJS web application as the client. For generating CSV files, I am utilizing the "express-csv" library (https://www.npmjs.com/package/express-csv) Below is the code for the server side: Definition ...

javascriptangularjsnode.jscsv

JavaScript: Controlling the ability to enter text based on the chosen option from a drop-down menu

After struggling to make my code work, I decided to create a piece of JavaScript to disable a text input when "Cash" payment is selected from the dropdown menu. On the contrary, I aimed to enable the text input if "Credit Card" payment was chosen. Unfortun ...

javascriptjqueryhtml

Building a Laravel PHP application that dynamically generates a custom JSON object fetched from the database and passes it from PHP to

I am faced with the task of generating a custom JSON object by organizing data retrieved from PHP in my Controller. I have full control over what information goes where and in what specific order. To accomplish this, it seems like I will need to go throug ...

javascriptphpjson