"Utilizing jQuery to Trigger CSS3 Transform Animation Replays After a Set Number of Iterations

I currently have an animated image set up like this:

<div class="image_for_sping">
    <img src="/anyimage.png">
</div>

The image has a style attribute added by jQuery which contains the following animation properties:

animation: spin360 0.1s linear 0s 20 forwards paused, spin360 0.25s linear 2s 8 forwards, spin360 0.5s linear 4s 4 forwards, spin360 1s linear 6s 2 forwards, spin90 2s linear 8s 1 forwards

This animation is created using the following CSS keyframes:

@-moz-keyframes spin360 { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin360 { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin360 { 100% { transform:rotate(-360deg); } }
@-moz-keyframes spin90 { 100% { -moz-transform: rotate(-90deg); } }
@-webkit-keyframes spin90 { 100% { -webkit-transform: rotate(-90deg); } }
@keyframes spin90 { 100% { -webkit-transform: rotate(-90deg); transform:rotate(-90deg); } }

Is there a way to replay this animation using jQuery without reloading the page?

You can try out an example here: https://jsfiddle.net/rzqc2bsh/1/

javascriptjquerycsscss-animations

Answer №1

If you want to replay an animation, you should toggle it on and off. This means removing it before adding it again, and then using a setTimeout function to trigger a redraw, otherwise it will not work.

$(document).ready(function() {
  $("#btn").click(function(e) {
    $('.box').css('animation', '');
    setTimeout(function() {
      $('.box').css('animation', 'spin360 0.1s linear 0s 20 forwards paused, spin360 0.25s linear 2s 8 forwards, spin360 0.5s linear 4s 4 forwards, spin360 1s linear 6s 2 forwards, spin90 2s linear 8s 1 forwards');
    }, 5)
  });
});
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

@-moz-keyframes spin360    { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin360 { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin360         { 100% { transform: rotate(-360deg); } }
@-moz-keyframes spin90     { 100% { -moz-transform: rotate(-90deg); } }
@-webkit-keyframes spin90  { 100% { -webkit-transform: rotate(-90deg); } }
@keyframes spin90          { 100% { transform: rotate(-90deg); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="box"></div>
  <input type="submit" id="btn" value="spin" />
</body>

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

Learn how to use CSS flexbox to easily vertically center items within a container with a full-height background

I'm having trouble with aligning text vertically centered within a box and making sure the background color stretches to full height. HTML: <div class="feature-content"> <div class="feature-visual"> <div class="embed-container"> ...

cssflexbox

Flawless Carousel - Flipping the Sequence

I am currently implementing Slick Carousel on a website that I am working on. One challenge I am encountering is trying to get the "slider-nav" to move in the opposite direction than it normally does. For instance, at the moment, the order goes like this ...

javascriptjqueryhtmlslick.js

Express along with Cheerio and JSDOM

I'm currently exploring the integration of Cheerio with Express to enable server-side DOM manipulation. I haven't had much luck beyond basic web scraping techniques. There are specific requirements I need to meet for this project. Currently, I ...

javascriptnode.jsdomexpresscheerio

Preventing Unwanted Scroll with jQuery

I'm currently working on a project where I have several description blocks that are meant to fade in when the corresponding image is clicked. The fading effect works fine, but there's an issue with the page scrolling up each time a new image is c ...

javascriptjqueryhtmlcss

Tips for updating sass import files as the body class changes

Is there a way to dynamically change the SCSS file with color variables based on the changing body class? For example, if my HTML includes: <body class="custom"> ... </body> I would like to load in style.scss: @import 'custom&a ...

cssimportsass

Is it possible for a memory leak to occur in node.js when using new Date()?

For this particular case, when updating an existing MongoDB document with new Date() causing a potential memory leak is a question that arises. One might wonder if allocating a new object with the new keyword necessitates manual deallocation to prevent lea ...

javascriptnode.jsmemory-leaksexpress

Bringing in additional elements, ensure that there is only a single main root element

Apologies for the beginner question. I am facing an issue while trying to display a .vue file with parent and children components, resulting in a "more than one root element" error. It seems strange to me because the imported components are supposed to be ...

javascriptvue.js

Refresh a DIV using two SQL queries in forms

I am encountering an issue with updating a single div element using the results from two different forms on an HTML page. I want either form1 or form2 to display results in the same div element, and it should be updated with one line of content fetched fro ...

javascriptphpjqueryhtmlsql

Retrieve the complete HTML content of a webpage, including the values of all input fields

I'm attempting to save the entire webpage as an HTML file, including all previously entered values in input fields. I have already tried this method: $("#content").html(); However, it does not retain the values entered into input fields. $("#conten ...

javascriptjqueryhtml

The AngularJS ng-if directive is failing to function properly, despite the logged boolean accurately reflecting the

I created a custom directive that handles the visibility of text elements on a webpage. While this logic works correctly half of the time, it fails the other half of the time. Here is the code snippet from my directive: newco.directive 'heroHeadline& ...

javascriptangularjscoffeescript

Nested routing in Nextjs is encountering issues when implemented with a specific file

I'm struggling with setting up routes in Next.js. When I create the path "/app/[locale]/admin/page.tsx," I can access http://url/admin/ without any issues. However, when I try to set up "/app/[locale]/admin/login.tsx," I encounter an error and cannot ...

javascriptnext.jsroutes

Using AJAX to communicate with a MySQL database and create a countdown timer using JavaScript

I have been trying to display data from a database using Ajax and incorporate countdown timers with times also fetched from the same database. It has been a struggle for me for almost 24 hours now. You can check out the main code here where you will notic ...

phpjavascriptmysqlajaxcountdown

Personalizing the fileTemplate selection in FineUploader

My English is not the best, so apologies in advance. I'm struggling to customize the FineUploader FileTemplate option. I don't want to use fineUploaderBasic; I want total customization. Initially, I managed to hide the file name and size after a ...

jqueryhtmlcssfine-uploader

Choosing items by pressing "shift + up arrow"

I have a collection of elements, each representing one line of text. When you click on an element, it changes color. If you then hold down "shift + arrow up," the items above it are also selected. How can this functionality be implemented? My initial app ...

javascriptangularjs

The comparison between form submission and AJAX request when transmitting data in JSON format

Working on a complex PHP/Drupal project, our team is facing the challenge of enabling a deep link into a page that requires extensive data to be passed from the originating site. We have full control over both ends so cross-domain issues are not a concern ...

javascriptphpjsonajaxforms

What crucial element is absent from my array.map function?

I have successfully implemented a table with v-for in my code (snippet provided). However, I am now trying to use Array.map to map one array to another. My goal is to display colors instead of numbers in the first column labeled as networkTeam.source. I at ...

javascripthtmlvue.jsvuejs2

How can you make a dropdown button interactive and display a list simultaneously?

I'm facing an issue with lines 45-47 in the second link. If that code is present, the button animates when clicked (which is great) BUT the dropdown items ("About," "Archive," "Contact") do not appear. If I remove lines 45-47, the dropdown items appea ...

jqueryhtml

How to Use Django to Load a Text File into an HTML File with the Help of

I came across an interesting code example on a website called w3schools.com that I would like to incorporate into my Django project. The code utilizes the jquery load() function to load a text file into an HTML file. Here is a snippet of the code: <!DOC ...

javascripthtmljquerydjango

The issue of empty data in Symfony 3 Form Ajax Post Requests

Displaying a list of tags with the option to add more dynamically. Using Ajax instead of Symfony Doctrine for form submission to allow dynamic updates without page reloads. This is how the form is structured in HTML: <div class="tag-form" ...

javascriptphpjqueryajaxsymfony

Tips for eliminating the gap between Bootstrap 4 columns

Is there a way to eliminate the spacing between Bootstrap columns? I have three columns set up using Bootstrap but no matter what I do, I can't seem to get rid of the space between them. <!doctype html> <html lang="en> <head> ...

javascripthtmlcssbootstrap-4