CSS Snippet - The Magical Rotated Logo

Posted at

Wish to place a logo that will be rotated 360-degrees back-and-forth gently on mouse-hover?

Here is your example.
right click it and select view frame's-source to see the code behind it.



Using transition to transform the logo to rotate 360 degrees, is lovely,
but it is a one way animation-
- If you wish to keep on the movement as long the mouse-is-hovered upon the logo,
using keyframe-animation is the way to go.

right click it and select view frame's-source to see the code behind it.



This would probably render an even higher-quality result,
since keyframe-animation uses, unambiguously, the GPU to render frames smoothly,
You can prefer the use of keyframe-animation in-favor of transition, or at-least use it in the same way, by specifying that the animation should repeat only one time.

Weirdly the ease-in-out effect, when a user no-longer hover the logo, and the animation is then rendered backward, back to the zero-position, seems to only work when using simple transition :/

Nevermind.. :]