How To Pause Css Animation By Hovering

Smoothly Reverting CSS Animations

Published Dec 20, 2021 Last updated December 21, 2021 loading views

Photo by Drew Beamer on Unsplash

Hey in that location, you probably tried to breathing some HTML elements in your time using transitions, transforms, and animations in the CSS. I tried the same, but one problem occurred when I animated something on hover.

For example, you lot can look at the theme switch push on this web log (it's in the bill of fare at the summit if y'all're on mobile):

When I commencement added the button and the animation to it, I made a fault. You can see the mistake below:

Not hovering all of a sudden ends the animation.

The mistake I fabricated tin can be easily disregarded. If y'all look closely, you can see when I starting time to hover over it, the animation starts, but as shortly equally I motion the mouse away, it abruptly resets to its starting point. It might be a small detail, and most folks can miss this, just information technology annoyed me from the start. Imagine the lawmaking for the theme switch to be something similar this:

                          .theme-switch:hover              {              transition              :              transform 2s ease-in-out;              transform              :              rotate              (360deg)              ;              }                      

Information technology was all fine, and it made the dominicus spin using CSS rotate, just the rotation would suddenly reset one time I moved the mouse away from the sun icon. Thankfully, there's a unproblematic solution for information technology. We need to put the transition rule to the general .theme-switch rule, not merely the :hover rule.

                          .theme-switch              {              transition              :              transform 2s ease-in-out;              }              .theme-switch:hover              {              transform              :              rotate              (360deg)              ;              }                      

Allow'south run into what we become when we moved the transition dominion:

Now it is silky smooth!

If we endeavour to hover and move our mouse abroad, it will revert smoothly using our transition rule. No more abrasive sharp reset of the animation, yay!

OK, this was fun and easy if you lot use CSS transitions, simply what if you decide to get with the keyframe animations? Read on to find out.

Smoothly Reverting Keyframe Animation

First off, if you are looking into reverting a keyframe animation, did you try to reconsider the approach y'all are taking? If yous did and yous realized that there's no chance in the world you could utilize a transition animation, then read on. But if you lot can reach what y'all need with a simple transition, whorl back to the first part of this blog mail service.

OK, then you are stuck with some keyframes, and you want to revert them, let's say, on hover. How do you achieve that? Start off, the solution is pretty hard to practice with just CSS and HTML, but in that location is a way.

For case, allow's say you have a sun icon that is constantly spinning like so:

Spin, spin, spin

The code for it would await something like this:

                          .sun-icon              {              animation              :              in 4s linear 0s space normal;              }                              @keyframes                in              {              from              {              transform              :              rotate              (0deg)              ;              }              to              {              transform              :              rotate              (360deg)              ;              }              }                      

Here we use @keyframes, the CSS at-rule that defines intermediate steps in a CSS animation. Information technology differs from using transition past giving yous more command over what happens at sure points in the animation. Nosotros desire the element afflicted by the animation to get from 0 degrees to 360 degrees, and we use the from to syntax of keyframes. Nosotros could've too put 0% 100% instead of from to. They are synonyms, pretty much.

And, finally, at the .sun-icon dominion, we use the shorthand animation rule where we define the following:

• in - the name of the animation
• 4s - the elapsing of the blitheness
• linear - the animation timing role
• 0s - the animation delay (significant our animation starts immediately since the filibuster is 0 seconds)
• infinite - the iteration count of our blitheness (how many times the blitheness volition play out)
• normal - the direction of the animation (can as well be reverse, which nosotros volition see later) Phew, that is a lot of occurrences of the animation word.

Now that we have that, we should be able to revert the animation somehow. How can we practice it? You might think we tin can leverage the animation-management and put it into reverse instead of normal. Well, if we do that, we have a jumping animation similar so:

Besides much flickering

Nosotros added this bit of code to achieve the above mentioned:

                          .sun-icon:hover              {              blitheness-direction              :              contrary;              }                      

But that is evidently unwanted behavior. How else tin can we revert the animation?

We can add a fiddling pull a fast one on. We can wrap the sun icon into a container that volition spin in opposite while hovering on it. Information technology will look similar this:

Smooth, again

This will exist the HTML role:

                                                            <div                class                                  =                  "sunday-container"                                >                                                              <img                class                                  =                  "sun-icon"                                src                                  =                  "sun.png"                                />                                                              </div                >                                    

And this the CSS part:

                          .sunday-container              {              width              :              128px;              top              :              128px;              animation              :              in 2s linear 0s infinite opposite;              animation-play-country              :              paused;              }              .lord's day-icon              {              blitheness              :              in 4s linear 0s infinite normal;              }              .sun-container:hover              {              animation-play-state              :              running;              }                              @keyframes                in              {              from              {              transform              :              rotate              (0deg)              ;              }              to              {              transform              :              rotate              (360deg)              ;              }              }                      

The container animation volition run for ii seconds (twice equally fast as the sun icon blitheness, which runs for 4 seconds). Likewise, the container blitheness will commencement every bit paused, but it volition run when we hover over the lord's day container element.

Other Means To Revert Keyframe Animations

There are other ways to do it, but it volition never be as smooth as the trick I showed you with both parent and child element spinning. At that place is a fashion to do it with JavaScript and playing around with keyframes in the CSS Tricks article.

The main trouble with keyframe animations is that there is no way to track their progress. Once the animation starts, at that place is no browser API to let yous figure out if the animation is at 46% of completion, for case. You tin can, potentially, setInterval and make it burn down on every x% of animation and mess with it in that location, but it is an unreliable solution.

Let me explicate why the solution with setInterval (like the one in the CSS Tricks commodity I shared above) is unreliable. Imagine if the setInterval fires a chip late, and you presume you are at 10%, but you're actually at 12% of the progress. If y'all change the animation, assuming yous are withal at ten%, you will get a slight jumping of the animation if you lot try to edit it. This brings us back to the similar trouble nosotros are trying to solve in the first identify.

As nosotros saw, we can't utilize the blitheness-direction rule and only change it from normal to opposite and vice-versa. The blitheness resets every time you lot modify that.

There is potentially one solution that might work, and that is with multiple animations. We can dissever one keyframe blitheness into multiple pocket-size ones and listen for animationend event. If yous're interested in this solution, consider subscribing to the newsletter and follow me on Twitter, where I volition postal service more about this.

Think Before You lot Animate

We've gone through a couple of solutions to revert an blitheness, but we never went through the nigh of import bespeak - consider what you are trying to breathing and how you lot are doing it. It probably doesn't make sense to use keyframes to rotate an chemical element in our examples. We tin quickly reach that with CSS transitions. I ended up using that arroyo on my blog in the end.

What I am trying to say is that possibly at that place is a more straightforward solution for you out there. You might avoid developing complex solutions and breaking your head trying to solve something. If yous need to accept the more complicated route, become ahead, nothing is stopping yous. I showed a couple of ways hither to cull and follow through.

Only I hope this weblog post is helpful to those with this kind of problem. It was fun to become through and figure out how to solve the keyframes part. I am sad that at that place isn't a proper solution for this in the CSS spec, but I promise it is coming in the time to come.

If y'all like what you lot read and you remember others volition do good from it, consider sharing it on Twitter blow:

Had troubles with reverting a CSS blitheness? Don't worry, I got youhttps://t.co/uRn6dvSMGF

— Nikola Đuza (@nikolalsvk) December 20, 2021

Also, I made my weblog lawmaking open up source, yous tin can check information technology out on GitHub here.

Thanks for tuning information technology. Catch you in the next one. Cheers.

Source: https://pragmaticpineapple.com/smoothly-reverting-css-animations/

Posted by: smithbanke1953.blogspot.com

Share this post