6/19/2023 0 Comments Css transition hoverWhat I am trying to say is that maybe there is a more straightforward solution for you out there. I ended up using that approach on my blog in the end. We can quickly achieve that with CSS transitions. It probably doesn’t make sense to use keyframes to rotate an element in our examples. We’ve gone through a couple of solutions to revert an animation, but we never went through the most important point - consider what you are trying to animate and how you are doing it. If you’re interested in this solution, consider subscribing to the newsletter and follow me on Twitter, where I will post more about this. We can split one keyframe animation into multiple small ones and listen for animationend event. There is potentially one solution that might work, and that is with multiple animations. The animation resets every time you change that. This brings us back to the similar problem we are trying to solve in the first place.Īs we saw, we can’t utilize the animation-direction rule and just change it from normal to reverse and vice-versa. If you change the animation, assuming you are still at 10%, you will get a slight jumping of the animation if you try to edit it. Imagine if the setInterval fires a bit late, and you presume you are at 10%, but you’re actually at 12% of the progress. Let me explain why the solution with setInterval (like the one in the CSS Tricks article I shared above) is unreliable. You can, potentially, setInterval and make it fire on every 10% of animation and mess with it there, but it is an unreliable solution. Once the animation starts, there is no browser API to let you figure out if the animation is at 46% of completion, for example. The main problem with keyframe animations is that there is no way to track their progress. There is a way to do it with JavaScript and playing around with keyframes in the CSS Tricks article. There are other ways to do it, but it will never be as smooth as the trick I showed you with both parent and child element spinning. Also, the container animation will start as paused, but it will run when we hover over the sun container element. The container animation will run for 2 seconds (twice as fast as the sun icon animation, which runs for 4 seconds).
0 Comments
Leave a Reply. |