CSS3 rotation animation - begins to rotate and then halts at a specific angle

I attempted to develop a function that initiates a spin, replaces an image, and then stops the spin.

However, when I remove the spin class, it jerks abruptly. How can I halt the spinning smoothly at a specific frame?

setTimeout(function() {
  $('.image').addClass("spinner");
}, 400);
setTimeout(function() {
  $('.image').removeClass("spinner");
}, 1500);
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
}

.spinner {
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

original code http://jsfiddle.net/m6z4jgdq/

updated example http://jsfiddle.net/m6z4jgdq/2/

jqueryhtmlcsscss-animations

Answer №1

To make your image rotate just once, simply remove the infinite iteration count from your CSS animation:

.spinner {
  -webkit-animation: spin 1s linear;
  -moz-animation: spin 1s linear;
  animation: spin 1s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; 
  animation-delay: 400ms; /* start after 400ms */
}

This adjustment allows the spinning image to naturally stop at 360° without any abrupt changes. Plus, you can set an animation-delay of 400ms if you prefer starting the rotation with a delay instead of using JavaScript and setTimeout:

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
}

.spinner {
  -webkit-animation: spin 1s linear;
  -moz-animation: spin 1s linear;
  animation: spin 1s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  animation-delay: 400ms;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image spinner" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

To specify how many times the animation should repeat, include the count in the animate CSS style. For example, to have it spin three times:

animation: spin 1s linear 3;


.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
}

.spinner {
  -webkit-animation: spin 1s linear 3;
  -moz-animation: spin 1s linear 3;
  animation: spin 1s linear 3;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  animation-delay: 400ms;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image spinner" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

If you desire a delay between each spin, define keyframes that pause the rotation and adjust the animation duration accordingly:

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
}

.spinner {
  -webkit-animation: spin 2s linear 3;
  -moz-animation: spin 2s linear 3;
  animation: spin 2s linear 3;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  animation-delay: 400ms;
}

@-moz-keyframes spin {
  50%, 100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  50%, 100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  50%, 100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image spinner" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

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

Struggling to fetch a custom attribute from the HTML Option element, receiving [object Object] as the result instead

I've been facing a challenging issue all day. My task involves making an ajax call to a predefined JSON file and trying to save certain contents into option tags using custom attributes. However, every time I attempt to retrieve the data stored in the ...

javascriptjqueryhtmljsonajax

Posts labeled with tags are not properly paginating

I've been working on a Django application that showcases posts created through Django's admin interface. These posts include tags implemented using django-taggit () The main page (home.html) is designed to display both posts and their respective ...

htmldjangodjango-viewsbootstrap-5django-taggit

Managing session timeouts during an AJAX call triggered by the Kendo ComboBox read action

Looking for a solution to handle session timeout specifically with kendo combo-box implementation? Here is the HTML code snippet for my kendo combobox: @(Html.Kendo().ComboBoxFor(model => model.PropertyName) .AutoBind(tru ...

c#jqueryajaxkendo-asp.net-mvc

Transforming Color with JQuery on the Fly

Check out this Jquery script that gradually changes the color of an object from (0, 0, 0) to (255, 255, 0). $(document).ready(function(){ var r = 0; var g = 0; changeColor(r, g); }); function changeColor(r, g){ var newColor = "(" + r + ", ...

javascriptjquery

Submitting form data via Ajax to be processed by Express.js with body parser

Having trouble sending form data to Node.js via AJAX. Using Express with body parser on Node.js However, receiving undefined in req.body. After searching extensively online and trying various solutions without success, I am seeking assistance on the c ...

htmlnode.jsajaxexpressbody-parser

What is the process for including the posting date in the JSON format while using the Instagram

Struggling to incorporate the date into my JSON Instagram feed has been a challenge for me. For reference, here is a demonstration on JSFiddle: http://jsfiddle.net/galnova/p74jy3sk/ The following code snippet includes the commented-out section related to ...

javascriptjqueryjsondateinstagram-api

What is the best way to maintain the toggleClass event state once an ajax call has been made?

If I have the HTML code below <div class="row"> <div class="link grey"> <a href="#">Link</a> </div> </div> <div class="row"> <div class="link"> <a href="#">Link</a> </div> & ...

javascriptjqueryajax

Moving a popup div along with a marker in Leaflet can be achieved by using the set

After creating a map using leaflet and adding markers to different locations, I implemented code that displays a popup div with a message when a marker is clicked. Here is the code snippet: markers.on("click", function(d) { div.html("This is Some info ...

cssgoogle-mapsd3.jsleaflet

Directly within Angular, map the JSON data to an object for easy assignment

I came across this information on https://angular.io/guide/http. According to the source, in order to access properties defined in an interface, it is necessary to convert the plain object obtained from JSON into the required response type. To access pr ...

htmlangulartypescript

Create a feature that allows users to dynamically add and remove image fields, with the ability to insert the selected images into a database

I'm currently using the following code and I am able to add attachments, but I'm facing an issue when trying to remove them. Can someone please help me with this problem? I tried adding an alert on the remove button and it seems to be working, h ...

phphtmljquerymysql

Automatic Submission based on Checkbox Selection

Creating a user-friendly interface for project admins is my goal, but I am encountering difficulties in displaying all tasks. The data is retrieved from the database and put into a table, with each task having a status represented by a binary value - 1 f ...

htmlform-submit

Modify the background color of a particular TD element when clicking a button using JavaScript and AJAX

When I click on the "Active account" button inside the designated td with the <tr id="tr_color" >, I want the value "1" to be added to the 'active_account' column in the database. I have been successful with this functionality. However, I a ...

javascriptjqueryhtmlcssajax

Obtaining an Element using Selenium with a specific label

My goal is to align the texts (answers) beside the radio buttons in order to compare them with the correct answer. Below is the HTML snippet: <tbody> <tr> <td class="middle" width="15"> <input name="multiple_choice_resul ...

htmlselenium-webdriverlabel

Executing jQuery script on dynamically loaded content

My website utilizes AJAX requests to load pages dynamically. One specific page includes a marquee script that I would like to implement. Unfortunately, due to the dynamic loading of the page, the marquee script is not functioning as expected. I have come ...

javascriptjquerydynamic

Using PartialViews with PagedList

I am currently working with a partial view that contains tabular data. I have implemented PagedList for pagination. Everything functions as intended when using a normal view, however, the issue arises when attempting to integrate it into a partial view. U ...

jqueryajaxasp.net-mvc-4asp.net-mvc-partialviewpagedlist

How do I alter the post title font size with a child theme?

After updating my theme, I noticed that the H1 for my Posts titles in the "Next Posts" section changed to H4 unexpectedly. How can I revert it back to how it was before? I've attempted fixing it without success. If you need a visual reference, you ca ...

csstitle

Modifying the TITLE dynamically post header insertion: A guide

Is there a way to dynamically change the title of an HTML page based on the content included below the header section using PHP? For example: <html> <header><title>I would like to change</title></header> <!--CONTENT--> ...

phphtml

Using an overlay with figure-img in Bootstrap 4 is a visually appealing design

I need assistance with adding an overlay to only the bootstrap 4 figure-img. In order to achieve this, I inserted a div with the class overlay beneath the figure-img. Below is the code snippet: <div class="col-md-4"> <figure class="service tex ...

htmltwitter-bootstrapcssbootstrap-4

An issue with AngularJS where the .focus() method is ineffective within the link function

Have you ever wondered why a certain directive works in one scenario but not in another? Let's take a look at an example: angular.module('app', []) .directive('selectOnFocus', function(){ return{ restrict: ...

jqueryangularjsangularjs-directive

Making sure that a footer div is consistently positioned at the bottom of the container div, regardless of the dimensions of the other elements

I am facing a challenge with a container div which has child elements. <div class='wrapper'> <div class='content'></div> <div class='footer'></div> </div> The height o ...

htmlcssfooter