Stop and resume CSS animation when the user hovers over and leaves

Can you share some insights on how to pause and resume a CSS transition?

Check out the code below:

animationstate = "running";

function animate() {
    if (animationstate == "running") {
        deskppssystemdiv.style.transitionDuration = "2000ms";
        deskppssystemdiv.style.transitionTimingFunction = "linear";
        deskppssystemdiv.style.transform = "rotate(45deg)";
    }
}
animate();

deskppssystemdiv.addEventListener("mouseenter", function(event) {
    animationstate = "paused";
});

deskppssystemdiv.addEventListener("mouseleave", function(event) {
    animationstate = "running";
});

Some suggestions I've come across include using the getComputedStyle property or applying classes with addClass and removeClass, but I'm still figuring it out.

javascriptcsscss-animations

Answer №1

After running a few tests, I have successfully implemented the following code:

let startTime = 0;
let stopTime = 0;
let runTime = 0;
let restTime = 0;

function animate(duration) {
  deskppssystemdiv.style.transitionDuration = duration;
  deskppssystemdiv.style.transitionTimingFunction = "linear";
  deskppssystemdiv.style.transform = "rotate(45deg)";
}

startTime = Date.now();
animate("2000ms");

deskppssystemdiv.addEventListener("mouseenter", function() {
  stopTime = Date.now();
  runTime = runTime + (stopTime - startTime);
  restTime = 2000 - runTime;
  deskppssystemdiv.style.transform = getComputedStyle(deskppssystemdiv).getPropertyValue("transform");
});

deskppssystemdiv.addEventListener("mouseleave", function() {
  startTime = Date.now();
  animate(restTime + "ms");
});

I incorporated extra time variables into my approach to make this work effectively. If you find this solution useful, consider marking it as answered and/or voting for it.

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

PHP mail function does not properly align HTML table outputs

After fetching data from the database and inserting it into an HTML table, everything appears fine. However, upon pressing the send button to email the content, sometimes the alignment of the HTML table is disrupted in the email. It seems like specific col ...

phphtmlcssphpmailer

Using Javascript libraries on a Chromebook: A comprehensive guide to getting started

Doing some coding on my chromebook and wondering if it's possible to download and utilize libraries such as jQuery. Would really appreciate any assistance with this! ...

javascriptjquerychromebook

Is there a way to convert my function into a variable in order to execute an array of statements

I'm struggling to convert this code into a variable. I need to bind it inside a statement execute array. This is the code I am working on, which retrieves the current date and timezone. I attempted using $date = function() {}, echo $date(); but that ...

javascriptphpfunctiondate

Unveiling the Secrets of Unearthing Data from JSON

My code receives JSON strings through a JSONP call. Although I'm aware of the general JSON structure, I don't know the specific keys and values it will contain. The typical structure is as follows: [ {"key_name": "value"}, {"key_name": ...

javascriptjqueryjsonhighcharts

Issues with dependencies in npx create react app

After initiating a new react project with npx create-react-app client, I have encountered an issue where the react-scripts command is not found, preventing me from running the start script. Is there a way to resolve this problem? Furthermore, when attempt ...

javascriptnpmpolyfillsnpxreact-scripts

What causes the variation in output when utilizing React's setState() function?

I'm puzzled by this Whenever I try this.setState({count: count+1}), it only updates the count once no matter how many times I click But when I attempt this.setState({count: this.setState.count}), every click successfully updates the cou ...

javascriptreactjs

Node.js Objects and String Manipulation

Within my nodeJS scenario, I am working with an object that includes both elements and an array of items: var Obj = { count: 3, items: [{ "organizationCode": "FP1", "organizationName": "FTE Process Org" }, { "organizationCode ...

javascriptarraysnode.jsjavascript-objects

An effective method for transferring form input and music between pages utilizing JavaScript

I've been grappling with this issue for quite some time now. On the initial page, I have a form like this: <form id="user" name="user" method="GET" action="the-tell-tale-heart.html"> Name: <input type="text" name="name"> & ...

javascriptjqueryhtml

Is there a way to implement a scrollbar within a DIV element?

I'm working on a webpage that includes several customized buttons within multiple DIVs. Take a look at this example on the fiddle. Since I have a lot of buttons, I need to find a way to add a scrollbar so users can easily navigate to the desired butt ...

css

Having trouble transmitting information to a php script using $.post()?

I have set up a shopping cart functionality on my website. Here's how it works: On the catalog page, there are four products, each with its own "Add to Cart" button. When a user clicks on one of these buttons, an onClick attribute calls the addToCart( ...

javascriptphpjqueryajax

JsDoc presents the complete code instead of the commented block

I have a VUE.JS application that needs to be documented. For .VUE components, we are using Vuese. However, when it comes to regular JS files like modules, we decided to use JsDoc. I have installed JsDoc and everything seems fine, but when I generate the HT ...

javascriptvue.jsrenderdocumentationjsdoc

What could be the reason for the individual components not being populated within the listItem?

*** I am iterating through an array and calling the ListItem component for each item. However, only one ListItem is being populated when there should be 3. Can someone please help me figure out what's wrong? *** Here is my code in App.js *** import F ...

javascriptcssreactjs

Preserve Text Selection While Utilizing DIV as a Button

I wonder if this issue is specific to the browser I'm using? Currently, I'm using Chrome... My goal is to enable users to save any text they've highlighted on the page with their cursor. I've set up the javascript/jQuery/ajax and it w ...

javascriptjqueryselectiontextselection

How can I show the real width of an image on a mobile device?

I have integrated the infinite slide plugin from jQueryscript.net into my website. While it works perfectly on desktop with background images, I am facing an issue on mobile devices where the image width needs to be displayed in full. I attempted to adjust ...

javascriptjqueryhtmlcssmedia-queries

Add option button

Is there a way to dynamically add radio buttons using jQuery or JavaScript and save the data into a database? I have successfully appended input types such as text, textarea, checkbox, and select with options. Here is my code: <!DOCTYPE html> < ...

javascriptphpjqueryhtmlmysqli

Navigating through the vertical and horizontal overflow of an image

When I hover over an image, it scales and the excess part of the image is hidden. However, I want the image to scale from the center by using transform-origin: 50% 50%. The issue arises when I try to scroll or drag around the transformed image - I can&apo ...

htmlcssoverflowtransform

Expanding the width of horizontal checkboxes to 100% using jQuery Mobile

I'm attempting to expand three horizontal checkboxes across the entire width of the page. <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-s ...

jqueryhtmlcssjquery-mobilecheckbox

What methods can I use to create a navigation bar similar to this design?

Lately, I've noticed a growing trend in navigation bars that are designed to resemble waves. Wavey Navbar I'm eager to incorporate a similar navbar into my website, but I'm struggling to figure out how to do it. I'm working with react ...

htmlcss

What are the steps for showcasing a personalized HTML tag on a web page

I need to capture user input text and display it correctly. This is what I have attempted: <div> <input type="text" ng-model="post.content" /> </div> <div> <div ng-bind-html="post.content| htmlize"></div> < ...

javascripthtmlangularjs

Executing the JavaScript function only a single time is what you're looking

I'm having trouble getting this script to work correctly on my website. It is supposed to trigger an alert when the specified id is in the viewport, but the issue I am encountering is that the alert keeps popping up repeatedly while the id is still vi ...

javascripthtml