CSS Smooth Stop CSS Keyframe Animation

In this article, we’ll explain how to use CSS to achieve a smooth stop CSS keyframe animation effect. CSS keyframe animations are animations that gradually change the style of an element over a specified period of time. However, by default, CSS animations stop abruptly at the end, rather than smoothly transitioning to their final state. Next, we’ll share some tips and examples to help you achieve a smooth stop CSS keyframe animation.

Read more: CSS Tutorial

Using the animation-fill-mode Property

The CSS animation-fill-mode property controls how animations appear when not in runtime. This property has four possible values:

– none: The default value, which means the animation only applies when running and does not appear when not in runtime;

– forwards: The animation retains the styles of the last keyframe when it ends;

– backwards: The animation displays the styles of the first keyframe before it begins;

– both: The animation applies both forwards and backwards effects.

By setting the animation-fill-mode property to forwards, we can achieve a smooth stop animation by maintaining the style of the last keyframe after the animation ends.

.animation { 
animation-name: example; 
animation-duration: 2s; 
animation-fill-mode: forwards; 
} 

@keyframes example { 
from {transform: translateX(0);} 
to {transform: translateX(100px);} 
} 

In the example above, the animation name is example and the duration is 2 seconds. By setting the animation-fill-mode property to forwards, the animation will maintain the 100-pixel displacement after the animation ends. This achieves a smooth stop animation effect.

Using the animation-play-state Property

The CSS animation-play-state property controls the state of an animation. This property has two possible values:
– running: The default value, which indicates the animation is running;
– paused: The animation is paused.

By setting the animation-play-state property to paused, we can stop the animation, achieving a smooth stop effect.

.animation {
animation-name: example;
animation-duration: 2s;
animation-play-state: paused;
}

@keyframes example {
from {transform: translateX(0);}
to {transform: translateX(100px);}
}

In the example above, the animation name is example and the duration is 2 seconds. By setting the animation-play-state property to paused, the animation will immediately stop at its current position, achieving a smooth stop animation effect.

Combining animation-fill-mode and animation-play-state

In addition to using either the animation-fill-mode or animation-play-state properties individually, you can also combine them for more precise control.

.animation { 
animation-name: example; 
animation-duration: 2s; 
animation-fill-mode: forwards; animation-play-state: paused; 
} 

@keyframes example { 
from {transform: translateX(0);} 
to {transform: translateX(100px);} 
} 

In the example above, we set both the animation-fill-mode and animation-play-state properties. By setting animation-fill-mode to forwards, the animation will remain at the 100-pixel position after it ends. By setting animation-play-state to paused, the animation will immediately stop at its current position. By combining these two properties, we can achieve a smooth stop animation effect.

Controlling Animations with JavaScript

In addition to using CSS properties, we can also use JavaScript to control the state of CSS animations. By modifying the element’s style or adding or removing class names, we can dynamically control the running and stopping of animations.

<div id="box" class="animation"></div> 

<script> 
var box = document.getElementById("box"); 
box.addEventListener("click", function() { 
box.classList.toggle("paused"); 
}); 
</script> 

<style> 
.animation { 
animation-name: example; 
animation-duration: 2s; 
animation-fill-mode: forwards; 
} 

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

@keyframes example { 
from {transform: translateX(0);} 
to {transform: translateX(100px);}
}

</style>

In the example above, clicking the box element toggles its class name to paused. When an element’s class name contains paused, setting animation-play-state to paused will cause the animation to stop at its current position. This allows us to dynamically control the animation’s progress and stopping using JavaScript.

Summary

CSS keyframe animations, by default, stop abruptly at the end, rather than smoothly transitioning to their final state. To achieve a smooth stop, we can use the animation-fill-mode property to hold the animation in its final state, or we can use the animation-play-state property to stop the animation. Furthermore, we can combine these two properties for even finer control. Additionally, by using JavaScript, we can dynamically control the state of CSS animations and achieve more flexible interactive effects. I hope this article helps you understand how to smoothly stop CSS keyframe animations and provides some inspiration for your web development work.