An infinite linear rotation can be started and stopped smoothly by combining a paused animation with a transition. On hover, the infinite rotation begins from 0turn to 1turn over 2s, while a transition simultaneously rotates from 0turn to -0.2turn over 1s. During the first second, the transition rotates in the opposite direction, creating a braking effect that lets the motion settle into constant speed. When hover ends, the infinite animation pauses and the transition runs in the opposite direction from -0.2turn back to 0turn, producing a smooth stop. Matching transition timing and easing to the animation speed is essential for a realistic illusion. The same behavior can be inverted by using :not(:hover) instead of :hover.
"On hover, two things happen at the same time: The infinite linear animation starts to play (it's paused initially): The element rotates from 0turn to 1turn with a duration of 2s A transition is triggered: The element rotates from 0turn to -.2turn with a duration of 1s. During the first second, the transition will rotate the element in the opposite direction, creating a "brake" effect on the first animation. After that, the linear behavior of the first animation takes the lead, and we get a rotation at constant speed."
"When you unhover, the animation pauses and the transition is triggered in the opposite direction, rotating the element from -.2turn to 0turn. This gives us a smooth stop. Choosing the right values is very important for the illusion to work. If the transition is too fast or too slow compared to the animation, the effect will be bad. Even the easing is crucial to have a realistic effect."
"That effect is made possible like this: I am still using the same technique I used in the first article, where I consider two rotations with an additive effect, but this time, we don't have two animations. We have an animation and a transition. On hover, two things happen at the same time:"
"I don't have a formula to share for this effect because I simply did some trial & error. It was quite easy to find values that performed well. The same code can be adjusted slightly to have the animation running initially and smoothly stop it on hover: I simply changed :hover with :not(:hover)!"
Read at Frontendmasters
Unable to calculate read time
Collection
[
|
...
]