What steps can I take to troubleshoot and repair this pulse animation issue?

I am trying to implement a new pulse animation in my project

However, it is not working as expected. How can I resolve this issue and identify the root cause?

I would like the circle to pulse when clicked (just one click without holding down) and then stop after 2 seconds

var abox = document.getElementsByClassName("pulsediv")[0];
function pulsing() {
   abox.classList.toggle("pulse");
}
@import "compass/css3";

body, html {
  height: 100%;
  background: #fff;
}

.pulsediv {
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  display: block;
  width: 100px;
  height: 100px;
  font-size: 1.3em;
  font-weight: light;
  font-family: 'Trebuchet MS', sans-serif;
  text-transform: uppercase;
  text-align: center;
  line-height: 100px;
  letter-spacing: -1px;
  color: white;
  border: none;
  border-radius: 50%;
  background: #5a99d4;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(#5a99d4, .5);
}
.pulse {
    animation: pulse 2s;
}

@-webkit-keyframes pulse {
  0% {
    @include transform(scale(.9));
  }
  70% {
    @include transform(scale(1));
    box-shadow: 0 0 0 50px rgba(#5a99d4, 0);
  }
  100% {
    @include transform(scale(.9));
    box-shadow: 0 0 0 0 rgba(#5a99d4, 0);
  }
}
<span class="pulsediv" onclick="pulsing">Hot</span>

javascripthtmlcss

Answer №1

After fixing your animation, I implemented an onClick function in Javascript which successfully resolved the issue.

var abox = document.getElementsByClassName("pulsediv")[0];
// reset the transition by...
abox.addEventListener("click", function(e){
  e.preventDefault();
  // -> removing the class
  abox.classList.remove("pulse");
  // -> and re-adding the class
  setTimeout(() => abox.classList.add("pulse"), 0);
}, false);
body, html {
  height: 100%;
  background: #fff;
}

.pulsediv {
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  display: block;
  width: 100px;
  height: 100px;
  font-size: 1.3em;
  font-weight: light;
  font-family: 'Trebuchet MS', sans-serif;
  text-transform: uppercase;
  text-align: center;
  line-height: 100px;
  letter-spacing: -1px;
  color: white;
  border: none;
  border-radius: 50%;
  background: #5a99d4;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
}

.pulse {
  animation: pulse 2s;
}

@-webkit-keyframes pulse {
  0% {
    transform: scale(0.9));
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
  }
  100% {
    transform: scale(0.9));
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
  }
}
<span class="pulsediv">Hot</span>

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

Is there a way to confirm that a file has been chosen for uploading prior to form submission, by utilizing the jquery validator?

I have a section on my website where users can upload files. I am trying to implement validation to ensure that a file has been selected before the form is submitted. Currently, I am using the jQuery form validator plugin for handling form validations. Th ...

javascriptjqueryformsvalidation

Enhancing functionality by integrating Jquery/JS with input fields and labels

I am currently facing a challenge in applying CSS to the label element when the corresponding input is selected. After attempting and failing to use input:checked + label due to limitations in the HTML structure that cannot be altered, I seek alternative ...

javascriptjqueryhtmlcss

Problem with CSS layout on Internet Explorer 9

I've encountered some layout difficulties in IE9 and I'm struggling to identify the root of the problem. Even though I'm using Foundation 5, I don't believe that's the issue. The content is within a Foundation grid set at large-12 ...

htmlcssinternet-explorer

Creating a simulated class within a function utilizing Jest

Currently, I am in the process of testing a controller that utilizes a class which functions like a Model. const getAllProductInfo = (request, response) => { const productInformation = new ProductModel().getAll(); response.status(200) resp ...

javascriptnode.jsunit-testingexpressjestjs

What is the best method for searching two arrays to determine if there is a match?

I have a list : [{item:'apple',quantity:5},{item:'banana',quantity:3}] I also have another list : [{category:'fruit',id:3435},{category:'vegetable',id:3}] My goal is to create : [{newItem:'banana',ne ...

javascriptunderscore.js

Responsive frame structure

I have set up a scene using A-frame () where I currently have a green box attached to the camera at all times. However, as the camera moves, the box also moves along with it. My question is, how can I position the box in the top right corner of the screen ...

javascriptthree.jsaframewebvr

Begin from the top and smoothly slide down the navbar-collapse to reset

I have recently updated the mobile navigation layout in bootstrap. However, I encountered an issue where the sliding pane was behaving unexpectedly - it was mixing with the default bootstrap sliding from top to bottom effect. How can I remove this default ...

jqueryhtmlcsstwitter-bootstrap

Exploring the world of design patterns using three.js and webpack

Looking to improve the organization of my code with three.js and webpack rather than having everything in a single file (like camera, meshes, lights, postprocessing, etc). I had the idea of using "manager modules" such as a LightManager class or a PostPro ...

javascriptdesign-patternswebpackthree.js

In JavaScript, the checkboxes in all columns of a table with over 200 rows can be set, but only the checkboxes in the rows

Seeking help to implement toggle buttons for checkboxes on a page with a large table fetched from an external system. The table can have over 200 rows or more. Currently, I am facing an issue where I can only access and manipulate the visible checkboxes o ...

javascripthtmldom

The timeline shows the movement of the jQuery object

I currently have a timeline bar that looks like this: <div class="plan-bar main-gradient"></div> https://i.stack.imgur.com/ybJar.jpg My question is, how can I make the red box move in real-time along this timeline bar? Thank you for your hel ...

javascriptjqueryhtml

CSS Investigation

I'm struggling to find a way to lock the width of this site so that it remains consistent on smaller screens. Any advice or guidance would be greatly appreciated. Feel free to visit If you'd like to see what the website currently looks like on a ...

htmlcss

"Learn the method for retrieving the number of rows in Cloud Code within the Parse platform

So I ran into an issue with this code - it keeps giving me a message that says success/error was not called. Parse.Cloud.beforeSave("Offer", function(request, response) { var duplicationQuery = new Parse.Query("Offer"); console.log(duplicationQuery.count ...

javascriptparse-platformparse-cloud-code

I am interested in changing the sitecore search facet filter from allowing multiple selections to only allowing a single

I have successfully implemented the Sitecore search widget and the result list is working as expected. However, I encountered an issue with the filter functionality using facets. By default, it supports multiple filters but my requirement is to have singl ...

javascriptnext.jssitecorejss

How can you use the syntax to refer to two separate arrays in a for loop by using a third array

Apologies if my question is unclear, allow me to clarify: I have two arrays in 2D format: const letterA = [ [...],[...],...]; const letterB = [ [...],[...],...]; const letterArray["A","B"]; I want to access them using a for loop like so: let i = 0; for ...

javascriptarrayssyntaxreference

apply full width styling to bootstrap select dropdown

<div align="center" class="form-group"> <select v-model="subject" class="form-control"> <option v-for="n in papertypes" class="">{{ n.type }}</option> </select> <br> By default, Bootstrap makes the s ...

cssbootstrap-4

Removing a blank line from a null variable in PHP and appending a backspace to it to display HTML text

How can I remove the empty line for a null variable? For example: $line1 = "Hello All"; $line2 = "Hello You"; $line3 = "Hello Me"; $line2 = null; Now when I echo echo "$line1<br>$line2<br>$line3"; it shows an empty line in the middle whe ...

phphtmltextnullecho

Implementing Axios Get request to an Express backend

I'm new to the back-end development world, currently focusing on learning Front-End but I've decided to venture into creating my own server using Node.js. I have successfully installed Express, Cors, and Axios. It appears to be functioning as I c ...

javascriptnode.jsexpressaxiosbackend

A fresh PHP page escapes from the confines of an iframe and expands to occupy the entire

When calling a new url from inside an iframe, the goal is for the new url to break free from the confines of the iframe and appear full screen. The challenge lies in not having control over the call to the new php file, as it is initiated by a credit card ...

javascriptphpiframe

Utilizing Ajax for submitting data in a Spring application

I'm attempting to send a PUT request to the controller using AJAX. Here is my code: $().ready(function(){ $('#submit').click(function(){ var toUrl = '/users/' + $('#id').val() + '/profile'; ...

javascriptajaxspringspring-mvchttp-put

Tips for Serializing and Deserializing an XML Document using Javascript

I keep encountering the error 'parameter1 is not a valid node' when using document.adoptNode. Here's the code snippet in question: $.ajax({ type: "GET", url: url, datatype: "xml", success: function (results) { ...

javascripthtmlajaxsvg