Saturday, October 1, 2022
HomeRuby On RailsEasily Reverting CSS Animations | Pragmatic Pineapple 🍍

Easily Reverting CSS Animations | Pragmatic Pineapple 🍍



Smooth rocks
Photograph by Drew Beamer on Unsplash

Hey there, you in all probability tried to animate some HTML parts in your time utilizing transitions, transforms, and animations within the CSS. I attempted the identical, however one downside occurred after I animated one thing on hover.

For instance, you may have a look at the theme change button on this weblog (it’s within the menu on the high if you happen to’re on cell):


image of the theme switch button

Once I first added the button and the animation to it, I made a mistake. You may see the error beneath:

normal animation that is reverted when hover is not happening
Not hovering immediately ends the animation.

The error I made could be simply neglected. For those who look intently, you may see after I begin to hover over it, the animation begins, however as quickly as I transfer the mouse away, it abruptly resets to its start line. It may be a small element, and most people can miss this, but it surely irritated me from the beginning. Think about the code for the theme change to be one thing like this:

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

It was all positive, and it made the solar spin utilizing CSS rotate, however the rotation would immediately reset as soon as I moved the mouse away from the solar icon. Fortunately, there’s a easy resolution for it. We have to put the transition rule to the final .theme-switch rule, not simply the :hover rule.

.theme-switch {
  transition: remodel 2s ease-in-out;
}

.theme-switch:hover {
  remodel: rotate(360deg);
}

Let’s see what we get once we moved the transition rule:

normal animation that is reverted when hover is not happening
Now it’s silky easy!

If we attempt to hover and transfer our mouse away, it should revert easily utilizing our transition rule. No extra annoying abrupt reset of the animation, yay!

OK, this was enjoyable and simple if you happen to use CSS transitions, however what if you happen to resolve to go along with the keyframe animations? Learn on to search out out.

Easily Reverting Keyframe Animation

First off, in case you are trying into reverting a keyframe animation, did you attempt to rethink the method you take? For those who did and also you realized that there’s no likelihood on the planet you would use a transition animation, then learn on. However if you happen to can obtain what you want with a easy transition, scroll again to the primary a part of this weblog put up.

OK, so you’re caught with some keyframes, and also you need to revert them, let’s say, on hover. How do you obtain that? First off, the answer is fairly laborious to do with simply CSS and HTML, however there’s a manner.

For instance, let’s say you might have a solar icon that’s continually spinning like so:

constantly spinning icon of a sun
Spin, spin, spin

The code for it might look one thing like this:

.sun-icon {
  animation: in 4s linear 0s infinite regular;
}

@keyframes in {
  from {
    remodel: rotate(0deg);
  }
  to {
    remodel: rotate(360deg);
  }
}

Right here we use @keyframes, the CSS at-rule that defines intermediate steps in a CSS animation. It differs from utilizing transition by providing you with extra management over what occurs at sure factors within the animation. We wish the ingredient affected by the animation to go from 0 levels to 360 levels, and we use the from to syntax of keyframes. We might’ve additionally put 0% 100% as an alternative of from to. They’re synonyms, just about.

And, lastly, on the .sun-icon rule, we use the shorthand animation rule the place we outline the next:

  • in – the identify of the animation
  • 4s – the length of the animation
  • linear – the animation timing perform
  • 0s – the animation delay (which means our animation begins instantly because the delay is 0 seconds)
  • infinite – the iteration rely of our animation (what number of instances the animation will play out)
  • regular – the route of the animation (can be reverse, which we’ll see later)
    Phew, that’s lots of occurrences of the animation phrase.

Now that we have now that, we must always be capable of revert the animation in some way. How can we do it? You may assume we will leverage the animation-direction and put it into reverse as an alternative of regular. Effectively, if we do this, we have now a leaping animation like so:

jumping keyframes animation using animation-direction: reverse
An excessive amount of flickering

We added this little bit of code to attain the above talked about:

.sun-icon:hover {
  animation-direction: reverse;
}

However that’s clearly undesirable habits. How else can we revert the animation?

We will add a little bit trick. We will wrap the solar icon right into a container that can spin in reverse whereas hovering on it. It would appear like this:

successfully reverting the sun keyframes animation
Clean, once more

This would be the HTML half:

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

And this the CSS half:

.sun-container {
  width: 128px;
  top: 128px;

  animation: in 2s linear 0s infinite reverse;
  animation-play-state: paused;
}

.sun-icon {
  animation: in 4s linear 0s infinite regular;
}

.sun-container:hover {
  animation-play-state: operating;
}

@keyframes in {
  from {
    remodel: rotate(0deg);
  }
  to {
    remodel: rotate(360deg);
  }
}

The container animation will run for two seconds (twice as quick because the solar icon animation, which runs for 4 seconds). Additionally, the container animation will begin as paused, however it should run once we hover over the solar container ingredient.

Different Methods To Revert Keyframe Animations

There are different methods to do it, however it should by no means be as easy because the trick I confirmed you with each mother or father and little one ingredient spinning. There’s a strategy to do it with JavaScript and enjoying round with keyframes within the CSS Methods article.

The primary downside with keyframe animations is that there isn’t a strategy to monitor their progress. As soon as the animation begins, there isn’t a browser API to let you determine if the animation is at 46% of completion, for instance. You may, probably, setInterval and make it hearth on each 10% of animation and mess with it there, however it’s an unreliable resolution.

Let me clarify why the answer with setInterval (just like the one within the CSS Methods article I shared above) is unreliable. Think about if the setInterval fires a bit late, and also you presume you’re at 10%, however you’re really at 12% of the progress. For those who change the animation, assuming you’re nonetheless at 10%, you’re going to get a slight leaping of the animation if you happen to attempt to edit it. This brings us again to the same downside we are attempting to resolve within the first place.

As we noticed, we will’t make the most of the animation-direction rule and simply change it from regular to reverse and vice-versa. The animation resets each time you modify that.

There may be probably one resolution that may work, and that’s with a number of animations. We will break up one keyframe animation into a number of small ones and hear for animationend occasion. For those who’re on this resolution, take into account subscribing to the publication and observe me on Twitter, the place I’ll put up extra about this.

Assume Earlier than You Animate

We’ve gone by means of a few options to revert an animation, however we by no means went by means of an important level – take into account what you are attempting to animate and the way you’re doing it. It in all probability doesn’t make sense to make use of keyframes to rotate a component in our examples. We will shortly obtain that with CSS transitions. I ended up utilizing that method on my weblog ultimately.

What I’m making an attempt to say is that possibly there’s a extra simple resolution for you on the market. You may keep away from creating complicated options and breaking your head making an attempt to resolve one thing. If you might want to take the extra difficult route, go forward, nothing is stopping you. I confirmed a few methods right here to decide on and observe by means of.

However I hope this weblog put up is useful to these with this sort of downside. It was enjoyable to undergo and determine the way to resolve the keyframes half. I’m unhappy that there isn’t a correct resolution for this within the CSS spec, however I hope it’s coming sooner or later.

For those who like what you learn and also you assume others will profit from it, take into account sharing it on Twitter blow:

Additionally, I made my weblog code open supply, you may test it out on GitHub right here.

Thanks for tuning it. Catch you within the subsequent one. Cheers.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments