How To Finish Css Animation After Hover

Smoothly Reverting CSS Animations

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

Photo by Drew Beamer on Unsplash

Hey there, y'all probably tried to animate some HTML elements in your time using transitions, transforms, and animations in the CSS. I tried the same, simply 1 problem occurred when I animated something on hover.

For example, you tin can look at the theme switch button on this web log (it's in the menu at the top if you're on mobile):

When I outset added the button and the animation to it, I fabricated a mistake. Yous can see the fault beneath:

Not hovering of a sudden ends the animation.

The fault I made can exist easily disregarded. If you expect closely, you can run across when I start to hover over it, the blitheness starts, merely as soon every bit I move the mouse abroad, information technology abruptly resets to its starting point. It might be a small particular, and most folks tin can miss this, but it annoyed me from the start. Imagine the code for the theme switch to be something like this:

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

It was all fine, and it made the sun spin using CSS rotate, only the rotation would of a sudden reset once I moved the mouse away from the sun icon. Thankfully, there's a uncomplicated solution for information technology. We need to put the transition rule to the full general .theme-switch rule, not just the :hover dominion.

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

Permit'southward run into what we get when we moved the transition dominion:

Now it is silky smooth!

If nosotros try to hover and move our mouse abroad, it volition revert smoothly using our transition dominion. No more than annoying precipitous reset of the blitheness, yay!

OK, this was fun and easy if you use CSS transitions, but what if you decide to become with the keyframe animations? Read on to notice out.

Smoothly Reverting Keyframe Animation

First off, if y'all are looking into reverting a keyframe animation, did you endeavor to reconsider the approach you are taking? If you did and you realized that at that place's no chance in the world y'all could use a transition animation, then read on. But if yous tin can achieve what you demand with a simple transition, curl back to the first part of this blog post.

OK, and so you are stuck with some keyframes, and yous want to revert them, let'south say, on hover. How do you lot attain that? Offset off, the solution is pretty hard to do with merely CSS and HTML, only there is a way.

For example, permit's say yous have a sun icon that is constantly spinning like then:

Spin, spin, spin

The code for it would look something like this:

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

Here we apply @keyframes, the CSS at-rule that defines intermediate steps in a CSS animation. It differs from using transition by giving you more than control over what happens at certain points in the animation. We want the chemical element afflicted past the animation to go from 0 degrees to 360 degrees, and nosotros use the from to syntax of keyframes. We could've also put 0% 100% instead of from to. They are synonyms, pretty much.

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

• in - the name of the animation
• 4s - the duration of the animation
• linear - the blitheness timing function
• 0s - the animation delay (significant our animation starts immediately since the delay is 0 seconds)
• infinite - the iteration count of our animation (how many times the blitheness will play out)
• normal - the direction of the blitheness (can also be opposite, which we will see later) Phew, that is a lot of occurrences of the animation word.

Now that we have that, we should exist able to revert the animation somehow. How tin can we exercise it? Y'all might recollect we can leverage the animation-direction and put it into contrary instead of normal. Well, if we do that, we have a jumping animation similar so:

Too much flickering

We added this bit of lawmaking to achieve the higher up mentioned:

                          .lord's day-icon:hover              {              animation-management              :              opposite;              }                      

But that is manifestly unwanted beliefs. How else can we revert the blitheness?

Nosotros tin can add a little play a joke on. We tin can wrap the dominicus icon into a container that volition spin in opposite while hovering on it. It will wait similar this:

Shine, again

This will exist the HTML part:

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

And this the CSS part:

                          .dominicus-container              {              width              :              128px;              height              :              128px;              animation              :              in 2s linear 0s space contrary;              animation-play-land              :              paused;              }              .lord's day-icon              {              animation              :              in 4s linear 0s space normal;              }              .sunday-container:hover              {              animation-play-state              :              running;              }                              @keyframes                in              {              from              {              transform              :              rotate              (0deg)              ;              }              to              {              transform              :              rotate              (360deg)              ;              }              }                      

The container animation will run for ii seconds (twice as fast as the sunday icon animation, which runs for 4 seconds). Also, the container blitheness will start as paused, but it will run when we hover over the sun container element.

Other Means To Revert Keyframe Animations

There are other means to practice it, but it will never exist as shine as the trick I showed you with both parent and kid element spinning. There is a way to exercise information technology with JavaScript and playing around with keyframes in the CSS Tricks article.

The main trouble with keyframe animations is that there is no mode to track their progress. Once the animation starts, in that location is no browser API to let you lot figure out if the blitheness is at 46% of completion, for example. You lot tin, potentially, setInterval and make it fire on every 10% of animation and mess with it there, but it is an unreliable solution.

Allow me explicate why the solution with setInterval (similar the one in the CSS Tricks article I shared above) is unreliable. Imagine if the setInterval fires a bit belatedly, and you presume you lot are at 10%, merely you're actually at 12% of the progress. If you change the animation, assuming you are still at ten%, you will get a slight jumping of the animation if yous effort to edit it. This brings united states dorsum to the like trouble nosotros are trying to solve in the start place.

Every bit nosotros saw, we can't utilize the animation-management rule and just alter information technology from normal to reverse and vice-versa. The animation resets every time you change that.

There is potentially one solution that might piece of work, and that is with multiple animations. We can dissever one keyframe animation into multiple pocket-size ones and listen for animationend effect. If yous're interested in this solution, consider subscribing to the newsletter and follow me on Twitter, where I will post more than almost this.

Recall Before Y'all Animate

We've gone through a couple of solutions to revert an animation, but we never went through the most of import betoken - consider what you are trying to animate and how you are doing it. It probably doesn't make sense to use keyframes to rotate an element in our examples. We tin can speedily achieve that with CSS transitions. I ended upwards using that arroyo on my blog in the end.

What I am trying to say is that possibly there is a more straightforward solution for yous out at that place. Yous might avoid developing complex solutions and breaking your head trying to solve something. If yous need to take the more complicated route, become ahead, zip is stopping y'all. I showed a couple of ways here to choose and follow through.

Merely I hope this blog postal service is helpful to those with this kind of problem. It was fun to go through and figure out how to solve the keyframes part. I am sad that there isn't a proper solution for this in the CSS spec, but I hope it is coming in the hereafter.

If you like what you lot read and you recall others will benefit from it, consider sharing information technology on Twitter blow:

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

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

Also, I made my blog code open source, you can check information technology out on GitHub hither.

Thanks for tuning it. Catch you lot in the adjacent i. Cheers.

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

Posted by: richmondsheming.blogspot.com

Share this post