Retrieve the present time of an ongoing CSS3 animation

I've been trying to retrieve the current time of a running animation, but I haven't had any luck so far. I can easily grab the start time using:

myelement.addEventListener('webkitAnimationStart', function (evt){ 
  console.log(evt.elapsedTime)                                   
});

And also the end time with:

myelement.addEventListener('webkitAnimationEnd', function (evt){ 
  console.log(evt.elapsedTime)                                   
})

However, I feel like this approach is lacking as these values are readily available in the CSS properties. Any suggestions on how to achieve this more efficiently?

Answer №1

CSS Animations only provide minimal state hooks, lacking the ability to report their current time directly. However, you can access the currently applied transformation matrix by utilizing window.getComputedStyle().

With CSS Animations, you are limited to start and end events without any provision for tracking current time. For real-time updates, incorporating JavaScript is necessary.

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 it possible to streamline multiple $.fn. calls using javascript or jQuery?

I recently started using datatables and was advised to include the following code: $.fn.dataTableExt.oStdClasses.sWrapper = 'no-margin last-child'; $.fn.dataTableExt.oStdClasses.sInfo = 'message no-margin'; $.fn.dataTableExt.oStdClasse ...

Error: Module not found '!raw-loader!@types/lodash/common/array.d.ts' or its type declarations are missing

I encountered a typescript error while building my NEXT JS application. The error message was: Type error: Cannot find module '!raw-loader!@types/lodash/common/array.d.ts' Below is the content of my tsConfig.json file: { "compilerOptions& ...

"Encountering an error in Vue3 CompositionAPI: 'quizz is not defined' while trying to call a function from the

When attempting to call a function, I am encountering an error that says "Uncaught ReferenceError: quizz is not defined." <script setup> import { defineProps } from "vue"; import { useRouter } from "vue-router"; const router = us ...

jQuery UI Datepicker Display Issue

I'm encountering an issue with a jQuery UI Datepicker object that is supposed to appear when I click inside a textbox. Below is the HTML code: <tr> <td class="label-td"><label for="dateOpen_add">Date Opened</label></td& ...

Optimal method for linking NodeJS and Angular in a seamless integration

I am currently working on developing a web application that integrates a Node server as the backend and Angular for the front end. At the moment, my application consists of two JavaScript files: server.js and controller.js. Below is the code snippet for ea ...

What is the significance of authors stating "AngularJS compiles the DOM"?

Currently, I am diving into the book Lukas Ruebbelke's AngularJS in Action, The author emphasizes throughout the text that, In AngularJS, a view is essentially the modified version of HTML after it has been processed by AngularJS. I'm struggli ...

Encountering a "SyntaxError: Unexpected token '/' in... index.ejs while compiling ejs" issue following the recent npm package updates

After upgrading EJS from version 2.7.4 to 3.1.5 along with some other packages in my project, I am encountering a problem where I can no longer access any of the webpages. Instead, an error is being thrown on every page. Additionally, after the update, I s ...

What is the most effective way to showcase a list of image URLs in HTML with Vue?

Currently, I am working with an array called thumbnails that holds the paths to various images. My goal is to use masonry in Vue to arrange these images in a grid format, but I'm encountering some difficulties achieving the desired outcome. This is m ...

What issues can be found in this code snippet for AngularJS in the browser code editor that is interacting with Node.js

Greetings, I am currently working on developing a free in-browser code editor for high school students at the basic level to share knowledge. After extensive research, I came across this link. Following the instructions provided, I made some setups and mod ...

The importance of using clearTimeOut in debounce function

Could you explain the importance of using clearTimeout in debounce function? Let's take a look at the code below: const saveInput = (name) => { console.log('saveinput ', name); } const debounce = (fn, timeout = 3000) => { ...

To activate two separate click events, one for an absolute element and another for the element positioned behind it, simply click on the desired absolute element to trigger both actions

Is it possible to trigger click events for both of these elements? position: relative container ELEMENT 1: standard div ELEMENT 2: position: absolute div In real life, element 2 is a transparent backdrop designed to capture clicks on top of the header ...

"Can you share how to send an array of integers from a Jade URL to an Express.js route

I am currently working on creating an array of integers in JavaScript using the Jade template engine. My goal is to send this array to an Express.js route when a button is clicked. I have attempted the following code: Jade File: //Passing the ID to fu ...

Tips for showing JSON data within multiple <div> elements on an HTML page with AngularJS and ng-repeat

I am looking to display JSON values on my HTML page, each in a separate div based on the image URL value from the .json file. However, I am encountering difficulties in displaying these values in the divs. Can someone please guide me on how to iterate and ...

Are DOM Events compatible with ajax-loaded content that cannot be unloaded?

How should events be managed with ajax-loaded content that can be hidden or displayed? I have created a sidebar in HTML that toggles visibility on click, along with two pages that are loaded using ajax. When the sidebar is hidden or displayed, I need to ...

jquery fails to alter label:before

I have encountered a peculiar issue with jQuery and labels. It's quite strange because everything seems to work fine when I change the background color of a label or its font-weight, but using the :before selector doesn't seem to work. Any thoug ...

Executing a php function upon onchange event triggered by CKEditor

My task involves invoking a PHP function when I suspect it is being triggered by an ajax call. Utilizing ckeditor, I aim to detect any keyboard activity and believe that using onchange will serve this purpose. Subsequently, I plan to execute a function t ...

Form a bond with the latest SignalR library to initiate communication

After attempting to connect to an asp.net core signalR server using the code below, I encountered some issues. Can you spot where I might have gone wrong? Here is the error message that I received: Error: The "promise" option must be a Promise v ...

showcasing real-time webcam information within an HTML web application

I have successfully integrated my webcam data live into my web application using the following code snippet. The live feed from my webcam is now visible on the webpage. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

What are the possible complications that could arise from implementing this system for designing web pages?

Feeling frustrated with the limitations and compatibility issues of CSS, I decided to create a new approach for structuring webpages. Instead of relying on CSS, I developed a javascript library that reads layout instructions from XML files and uses absolut ...

Is there a way to generate a checkerboard dynamically with the help of jQuery?

I've made some progress so far, but I'm facing a challenge where I need to push 8 <td> elements into 8 different <tr> elements without hardcoding anything or modifying the HTML directly. Any help would be appreciated! JavaScript v ...