OK so when I hover over an image I have it rotate 360 degrees in 1s. Say for example I take my cursor off at 0.5s. The image jumps back abruptly from 180 degrees to 0. Is there any way I can make it gradually go back from where it is to 0 degrees, without this abruptness?

Thank you for your help.

 

Is this just for effect or is there a reason you need to animate the image?

In any case to answer your question: it’s going to need a load of JS to make this work as you need to remember the current state is order to reverse the animation.

Also consider that’s it’s not ever going to work well on a touch screen as there is no real hover condition.

It is just for effect @fisicx. Thank you for the tips. I am just frustrated when I see on websites that the transition moves smoothly back when I move the cursor away. I guess my answer is in my last sentence - I should be using transitions, not animations for this?

Yes transitions may be better. But I’d still question if it’s really worth all the effort if most of your visitors will never see it.

Do you have a link to a site that has this effect?

On 3/19/2020 at 1:25 PM, fisicx said:

Is this just for effect or is there a reason you need to animate the image?

In any case to answer your question: it’s going to need a load of JS to make this work as you need to remember the current state is order to reverse the animation.

Also consider that’s it’s not ever going to work well on a touch screen as there is no real hover condition.

You don't need any JS to do this, very straightforward with a CSS transition https://codepen.io/rbrtsmith/pen/oNXMpKx

hover gets triggered on touch devices when you touch the element with the handler attached.

I'm not sure why you'd want to do this animation 🤷‍♂️however however using hover is fine if you understand that they have to touch it on touch devices.  I built the nav at Moonpig  and it responds to hover on larger screens, however on smaller screens that are typically touch based you have to click to open the dropdowns.  It's also worth considering users who can only use the keyboard.  On the moonpig nav we have buttons underneath each top level link that trigger the dropdowns when keyboard users press enter.

If the animation is necessary for all users you have to think carefully about how touch, keyboard and mouse users will interact with it.

The problem with your solution is it doesn’t do what they want.

They want a 1 second rotation on hover but if you release after 0.5 seconds the animation reverses.