When the CSS animation has finished in JavaScript

I am currently developing a game using HTML/JavaScript, and I have implemented a "special ability" that can only be activated once every x seconds. To indicate when this ability is available for use, I have created a graphical user interface element. Since I am incorporating CSS animations in my project, I need to determine whether the animation on this element has completed upon a keypress event.

Instead of utilizing addEventListener, I aim to achieve this functionality through a straightforward if statement. However, I am uncertain about the feasibility of this approach.

The code snippet I have so far is:

    var keystate = {};

    window.addEventListener("keydown", function(e) {
      keystate[e.keycode || e.which] = true;
    }, true);
    window.addEventListener("keyup", function(e) {
      keystate[e.keycode || e.which] = false;
    }, true);

    window.setInterval(function() {
      if (keystate[87]) { //w key, THIS is where I want to check if the animation has completed as well
        //do stuff
        document.getElementById("circle_flash_glow").classList.add("circle_flash_use");
      }
    }, 16.666666666666667);
#svg_circle_loader {
  position: absolute;
  right: 0;
  bottom: 0;
  background: none;
  border: none;
  margin: none;
  padding: none;
}
#circle_flash_loader {
  fill: none;
  stroke: #F00;
  stroke-width: 10px;
  stroke-dashoffset: 80;
  animation-fill-mode: forwards;
}
.circle_loader_load {
  animation: circle_flash_loading linear;
  animation-duration: 2.5s;
}
@keyframes circle_flash_loading {
  0% {
    stroke-dasharray: 0, 314;
  }
  100% {
    stroke-dasharray: 314, 0;
  }
}
#circle_flash_glow {
  fill: none;
  stroke: #F00;
  stroke-width: 0px;
  animation-fill-mode: forwards;
  opacity: 1;
}
.circle_flash_use {
  animation: circle_flash_pulse 0.6s ease-out;
}
@keyframes circle_flash_pulse {
  0% {
    opacity: 1;
    stroke-width: 0px;
  }
  100% {
    opacity: 0;
    stroke-width: 70px;
  }
}
<svg id="svg_circle_loader" width="200" height="200">
  <defs>
    <filter id="f1" x="-50" y="-50" width="200" height="200">
      <feGaussianBlur stdDeviation="5"></feGaussianBlur>
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" id="circle_flash_glow" class="" filter="url(#f1)"></circle>
  <circle cx="100" cy="100" r="50" id="circle_flash_loader" class="circle_loader_load"></circle>
</svg>

Answer №1

To add a variable to track the current state, and update it using setTimeout() to check if it is animating or not. Also, include window.onload to retrieve its state.

window.onload=function(){
  animating=true;
  sts.value=animating;
  window.setTimeout(function() {
    animating=false;
    sts.value=animating;
  }, 2500);
};

The value of 2500 is used based on your CSS animation property which is set to 2.5s=2500ms

var animating = false;
var keystate = {};

window.addEventListener("keydown", function(e) {
  keystate[e.keycode || e.which] = true;
}, true);
window.addEventListener("keyup", function(e) {
  keystate[e.keycode || e.which] = false;
}, true);

window.setInterval(function() {
  if (keystate[87]) { //w key, THIS is where I want to check if the animation has completed as well
    //do stuff
    if (!animating) {
      alert("animation finished");
      document.getElementById("circle_flash_glow").classList.add("circle_flash_use");
    }
  }
}, 16.666666666666667);

window.onload = function() {
  animating = true;
  sts.value = animating;
  window.setTimeout(function() {
    animating = false;
    sts.value = animating;
  }, 2500);
};
#svg_circle_loader {
  position: absolute;
  right: 0;
  bottom: 0;
  background: none;
  border: none;
  margin: none;
  padding: none;
}
#circle_flash_loader {
  fill: none;
  stroke: #F00;
  stroke-width: 10px;
  stroke-dashoffset: 80;
  animation-fill-mode: forwards;
}
.circle_loader_load {
  animation: circle_flash_loading linear;
  animation-duration: 2.5s;
}
@keyframes circle_flash_loading {
  0% {
    stroke-dasharray: 0, 314;
  }
  100% {
    stroke-dasharray: 314, 0;
  }
}
#circle_flash_glow {
  fill: none;
  stroke: #F00;
  stroke-width: 0px;
  animation-fill-mode: forwards;
  opacity: 1;
}
.circle_flash_use {
  animation: circle_flash_pulse 0.6s ease-out;
}
@keyframes circle_flash_pulse {
  0% {
    opacity: 1;
    stroke-width: 0px;
  }
  100% {
    opacity: 0;
    stroke-width: 70px;
  }
}
<svg id="svg_circle_loader" width="200" height="200">
  <defs>
    <filter id="f1" x="-50" y="-50" width="200" height="200">
      <feGaussianBlur stdDeviation="5"></feGaussianBlur>
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" id="circle_flash_glow" class="" filter="url(#f1)"></circle>
  <circle cx="100" cy="100" r="50" id="circle_flash_loader" class="circle_loader_load"></circle>
</svg>
<input id="sts" value="" />

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

Displaying VueJS property inside an array of HTML elements

Currently, I am working with an HTML array that contains the following data: data-groups='["category_all", "data goes here"]' In my project, there is a prop named "title" that holds the specific string needed to be displayed in the "data goes he ...

Anchor checkboxes

I am dealing with a large number of checkboxes that are linked to anchors. Whenever a checkbox is clicked, it navigates to the corresponding anchor on the same page. Is there a more efficient way to implement this? With around 50 checkboxes, my current cod ...

Styling the Menu Item with CSS

A graphic designer provided me with these elements to incorporate into the HTML design. Everything was going smoothly until I encountered the faint, uneven borders on the LI tags, especially when dealing with a list containing only five items. If anyone ...

Mysterious CSS "manifestation" perplexes Chrome while evading Firefox's gaze

There seems to be an issue with the jQuery plugin on this demo page: If you access it using Firefox, you'll notice that the social sharing buttons are visible and functioning properly. However, in Chrome, there appears to be a peculiar CSS computatio ...

What is the method to rotate an SVG icon contained within a button when clicked?

I'm attempting to incorporate a CSS animation into an SVG that is enclosed within a button. Example <button class="spin"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ari ...

What steps should be taken to create a two-column table from a given list of items?

I am trying to display a list of words in two columns, one word after another from left to right. Here is the desired table structure: <table id="wordTable"> <tr> <td>ac </td> <td>bd </td> </tr> ...

Having trouble with the Bootstrap dropdown not activating the click event?

My issue involves a Bootstrap dropdown where the click event is not triggering. I'm curious about why the click event won't trigger and if there's a solution available to fix this problem. <div class="dropdown d-inline-block"> ...

Creating a 10-digit unique value can be achieved with either meteor or JavaScript

I am in need of generating 10 character unique codes, containing both letters and digits, to be utilized for system generated gift vouchers. Currently, the code I am using includes 13 numbers. var today = new Date(); Number(today); Is there a different m ...

Angular 2 doesn't reflect changes in component variables in the view until mouseover happens

Since updating from angular2-alpha to the latest version, I've noticed that when a boolean value changes in my *ngIf directive, it doesn't reflect in the view until certain actions are taken. Here is the specific component code: declare var CKE ...

Using JQuery to Update Text, Link, and Icon in a Bootstrap Button Group

I have a Bootstrap Button group with a split button dropdown. My goal is to change the text, href, and icon on the button when an option is selected from the dropdown. I am able to change the text successfully, but I'm having trouble updating the HREF ...

Unusual scroll bar movements when using jQuery validation

When I click the Add Dependent link button, I wanted the scroll bar to automatically scroll to the bottom, and it does just that. However, there is a small issue after the postback where the text "Please fix the following problems:" briefly appears, even t ...

Failure to return an error in the mongoose find function

While attempting to create some statics with Mongoose, I am facing an issue where I cannot access the error argument when using find() or findOne(). Below is my static method: User.statics.authenticate = function(login, password, cb){ return this.mode ...

Avoid activating the panel by pressing the button on the expansion header

I'm facing a problem with the delete button on my expansion panel. Instead of just triggering a dialogue, clicking on the delete button also expands the panel. How can I prevent this from happening? https://i.stack.imgur.com/cc4G0.gif <v-expansion ...

Triggering a loop error may occur when attempting to update the state based on a

What I want to achieve is updating the state with the value received from a child component. However, whenever I try using the setstate method in my function, it results in a looping error. Here's a snippet of my code: class ParentTab extends Compone ...

Picture fails to load on Ionic app on the device

Currently, I am utilizing Ionic 3 for my project. The location of the images file is \src\assets\img. This pertains to a basic page implementation. export class BasicPage { items = []; constructor(public nav: NavController ,private adm ...

Modifying the language of the response (error/success) in stripe.js

I have successfully implemented stripe.js v2 for processing payments in my application catering to a French client. Everything is working smoothly, but I am facing an issue with form validation. I want the error messages to be displayed in French instead o ...

Challenges between Django and VSCode

As I dive into practicing website development with Django, I've encountered a problem while trying to save my work in VSCode and updating my local browser. It seems that only certain changes are being reflected. For example, when I delete code in my C ...

How can I open a new window, redirect the current one, and bring focus to the new window using JavaScript?

Trying to troubleshoot a problem I'm having with the following setup: - Using SAP Portal, I am launching an HTML page containing this code. - The goal is for the HTML page to open a new window. - Once the new window opens, the original HTML page ...

Hide the element, update its content, and smoothly transition back

I am looking to add dynamic content to an element on my HTML page, with the inserted HTML transitioning smoothly from 0% to 100% opacity. HTML <div id="content"></div> CSS #content { opacity: 1; transition: opacity .5s ease-out; -moz ...

Manage the application of CSS media queries using JavaScript

Is there a method to control which CSS media query a browser follows using JavaScript? As an example, let's say we have the following CSS: p { color: red; } @media (max-width: 320px) { p { color: blue; } } @media (max-width: 480px) { p { col ...