Halt a CSS spin animation gracefully

Question

Halt a CSS spin animation gracefully

In order to create a smooth rotation effect for an image in my HTML page, I've created a CSS class named 'rotate' that rotates the image indefinitely. Here is the code:

.rotate{
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

However, I now need to stop the rotation smoothly at a specific keyframe, but I'm not sure how to achieve this with another CSS class. Can someone help me out?

.rotateToStop{
    ...
}

I plan to add the 'rotate' class initially and then switch to 'rotateToStop' when a particular event is triggered in my JavaScript code:

$('myelement').addClass('rotate');
// ... 
// Shortly after the event is triggered
$('myelement').removeClass('rotate');
$('myelement').addClass('rotateToStop');

If anyone has any suggestions on how to implement the 'rotateToStop' class in CSS, please let me know! =)

javascript jquery css css-animations

Answer 1

Answer №1

Unfortunately, simply removing the animation class from an element will not smoothly stop the animation.

Instead, you can halt the animation with this solution:

.rotateToStop {
  animation-play-state: paused; 
}

In order to achieve this, you must toggle a class that initiates or pauses the animation without removing the initial .rotate class.

However, one issue to note is that the animation will pause at the exact instant the necessary class is added to the element.

Answer 2

Unfortunately, simply removing the animation class from an element will not smoothly stop the animation.

Instead, you can halt the animation with this solution:

.rotateToStop {
  animation-play-state: paused; 
}

In order to achieve this, you must toggle a class that initiates or pauses the animation without removing the initial .rotate class.

However, one issue to note is that the animation will pause at the exact instant the necessary class is added to the element.

Halt a CSS spin animation gracefully

Answer №1

Similar questions

Exploring options beyond ng-model

What type of technology is typically utilized in creating functional platforms such as goDaddy, wix, and other web design websites?

Turn off transition animations

Deactivate Date Field for Editing Orders in WooCommerce

Warning: It is important for each child in a list to have a unique "key" prop in the render() function of React

Using Javascript's Array.Filter function to adjust the original array

The code written inside the <script> tag seems to be malfunctioning when placed in the component.html file within VScode while working with

Dynamic sliding effect in CSS for seamless showing and hiding of div elements

Is it possible to indicate which mat-tab has been clicked? Especially when the mat-tabs are being generated dynamically

Revise every Express.js model

Transferring information to a MySQL database via an AJAX POST operation

Styling your Vuetify V-data-table with CSS

The specified variable will not be visible in the window object

Adjusting the minimum value on a textfield with JQuery Validate plugin in real-time

Choose the text by clicking on a button

Concealing the rear navigation button within the material carousel

Printing Strings in JavaScript IF Conditional Block

Using JQuery, you can make a $.get or $.ajax request to a PHP script on the server that needs to receive

What is the approach for for loops to handle non-iterable streams in JavaScript?

How can I create a web control or jQuery function that showcases images retrieved from a database?