How to Disable CSS3 Animation Using jQuery?

Upon loading the page, I have an object with a specific animation:

.logo-mark {
        -webkit-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
            -moz-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
            -ms-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
            animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
    }

I want JavaScript to trigger a separate animation indefinitely at certain intervals. To achieve this, I created a new class called .logo-loading and utilized jQuery for adding and removing classes when needed.

.logo-loading {
            -webkit-animation: spin 4s infinite linear;
                -moz-animation: spin 4s infinite linear;
                -ms-animation: spin 4s infinite linear;
                animation: spin 4s infinite linear;
        }

However, even after removing the class using JavaScript, the object continues to rotate endlessly. Is there a solution to prevent this ongoing rotation?

javascriptjqueryanimationcss

Answer №1

To halt any animation, you can override the CSS properties with the value of "none."

function stopAnimation(element)
{
    $(element).css("-webkit-animation", "none");
    $(element).css("-moz-animation", "none");
    $(element).css("-ms-animation", "none");
    $(element).css("animation", "none");
}

By utilizing this function, you can easily cease the animation effect...

Answer №2

To halt the movement of an animation (and later resume from where it stopped), you can switch its play state using this CSS property:

.paused {
   -ms-animation-play-state:paused;
   -o-animation-play-state:paused;
   -moz-animation-play-state:paused;
   -webkit-animation-play-state:paused;
  animation-play-state: paused;
}

You can then utilize jQuery to toggle the paused class:

$("#animatedElement").click(function(e){ 
  $(e.currentTarget).toggleClass("paused"); 
});

Check out this example demonstrating pausing without JavaScript: http://jsfiddle.net/fRzwS/

Also, take a look at this post on forrst by the author of the fiddle: http://web.archive.org/web/20120614200555/http://forrst.com/posts/How_To_Pause_CSS_Animations-0p7

Answer №3

This is functioning as expected on Firefox, you can view the demonstration on this jsFiddle:

I have made adjustments to your example (keeping only the -moz- properties for Firefox) with 1-second cycles. I initiate the spinning and then stop it after 3.6 seconds. Everything seems to be working properly on Firefox 11.0 on Xubuntu 11.10.

If you are not using Firefox, could you please test it in Firefox to verify that both your original example and my modified version work correctly there? It's possible that this issue is specific to a certain browser."

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

Enhance Select Dropdown in AngularJS with Grouping and Default Selection

I am facing an issue with a form that includes a SELECT element. I have successfully loaded the possible values in my controller from a function that retrieves data from a database and groups the options by a group name. Although the list of options is lo ...

javascriptangularjsdrop-down-menu

What is causing the malfunction in this JavaScript date array?

I'm encountering an issue with my array of dates where they all end up being the same date when I try to retrieve them. var paydates = new Array(); var i; var firstDate = new Date(); firstDate.setFullYear(2010, 11, 26); //setting the initial date as ...

javascriptarrays

Executing asynchronous JavaScript code within a Golang request: a comprehensive guide

I am in need of a solution to retrieve the content from dynamically generated pages using ajax on a website, specifically with code written in golang. I have found examples for non-ajax pages but struggling to find one that works for ajax pages. Any guid ...

javascriptajaxasynchronousgorequest

Getting started with JavaScript arguments can be overwhelming for newcomers

Can you figure out why the variable 'a' doesn't increase by 1 in the following code snippet? var a = 5; function abc(y) { y++; } abc(a); // The value of 'a' remains 5, instead of increasing to 6. Why is that? However, when ...

javascript

The asynchronous await feature is not in a holding pattern within mongoose

Why is it printing 'data return' first instead of after the loop is done? code exports.put = async function (req, res, next) { const data = Array.from(req.body); let errors = false; data.forEach(async (update, index) => { ...

javascriptnode.jsmongodbmongoose

Transferring data between components in React by passing parameters through Links

When calling another component like <A x={y}/>, we can then access props.x inside component A. However, in the case of calling EditCertificate, the id needs to be passed to the component. I am using a Link here and struggling to pass the id successf ...

javascriptreactjstypescriptuser-interface

Navigate to a different aspx page using jQuery Mobile

Currently, I am in the process of transitioning a jQtouch application to utilize JQuery Mobile instead. Most components have been successfully transferred, but I am encountering a few issues. 1) In jQTouch, I was using: $("#approveRequests").bind('p ...

jqueryasp.netjquery-mobile

Jquery is not working as expected

I am having trouble implementing a jQuery function to show and hide select components. It doesn't seem to be working correctly. Can someone help me identify the issue? <html> <head> <meta charset='UTF-8' /> <script ...

javascriptjqueryajaxhtml

Guide for invoking a servlet via a navigation bar hyperlink and implementing a jQuery feature for smooth scrolling upon clicking

Is there a way to call a servlet from a navigation bar href link and at the same time trigger a jQuery function for smooth scrolling down? I attempted to call the servlet using an onclick href link, it successfully calls the servlet but does not trigger t ...

javascriptjavajquery

Eliminating HTML element within CKEditor

I'm in the process of developing a CKEditor plugin and one feature I'd like to include is the ability to delete specific HTML elements from the editor's content. For example, removing an <img id="remove-me" />. I understand that I can ...

javascriptjqueryhtmlckeditor

Error: Attempted to access the 'state' property of an undefined object

I am working with the following function: extractCountries: function() { var newLocales = []; _.forEach(this.props.countries, function(locale) { var monthTemp = Utils.thisMonthTemp(parseFloat(locale["name"]["temperature"])); if(p ...

javascriptreactjs

Is it possible to apply capital spacing in CSS for OpenType fonts without using font-feature-settings?

Is it possible to adjust capital spacing (cpsp) for an element without impacting any other applied OpenType features? Unfortunately, utilizing the font-feature-settings is not a viable solution. For example, if we use font-feature-settings: 'cpsp&apo ...

csstypographyopentypefont-feature-settings

Retrieving the <html> tag within an Angular component

In an Angular component, the <body> and <head> tags can be accessed by injecting DOCUMENT as shown below: import { DOCUMENT } from '@angular/common'; import { Inject } from '@angular/core'; export class TestComponent { c ...

javascriptangulartypescript

Additional pixels positioned beneath my HTML table

Currently, I am working on a Joomla website using the Helix3 framework, but have run into an issue that I can't seem to resolve. There seems to be some additional pixels below my HTML table at the top of the page where it says "::: ÉLŐ KÖZVETÍTÉ ...

htmlcssjoomlahtml-table

Center image and text horizontally within a div, with padding surrounding them

CSS Challenge <div id="container"> <img src="1.jpg" /> <span>text next to image</span> </div> Can you apply CSS to center the image and span within the div container, with a 5px padding between the image and spa ...

css

Using Laravel: Validate username existence with jQuery AJAX before form submission

After creating a registration form with numerous fields, I encountered an issue when submitting data and receiving validation errors. The user would have to refill empty inputs, causing unnecessary delays. To streamline the process, I am looking to impleme ...

javascriptphpajaxlaravel

The select2 multi-select box has a peculiar behavior where it only stores the last selected value in the array

After implementing the select2 multi-select box in my django application, I encountered an issue with how the selected values were being handled when passed into an array. Below is the code snippet : HTML Page: <head> <link href="https://cdnjs. ...

javascriptpythonjquerydjangojquery-select2

Iterate through a collection of objects and organize the data in a specific way

Within the data structure of my API response, I am attempting to iterate through an array of objects under the items key. Each value inside these objects needs to be formatted based on the corresponding format type specified in the header key. To assist wi ...

javascriptreactjstypescript

Incorporating a Link to a RowLabel on a Google Chart Timeline

I have been working diligently on constructing a timeline for our team's Project Roadmap. Everything is set up quite nicely: I've successfully embedded the Timeline into our Google Site and it seems to be functioning well with all the components ...

javascripthtmlcsschartsgoogle-visualization

Guide on Creating HTML Embeds for Multiple Selection Code Blocks

I need some help creating a feature similar to this: View Image Unfortunately, I haven't been able to locate any tutorials or code samples on how to implement multi-selectable language code blocks using HTML/CSS. My CSS knowledge is limited, and I r ...

htmlcsscodeblocks