CSS CSS Transitions and Transforms Adding 3D Effects with CSS Create a Flipping Animation with 3D Transform Properties

Nicole Pearcy
Nicole Pearcy
6,895 Points

Flipping cards appear jittery on hover

Hi, I noticed that often, however not all the time, when I hover over the flip card it can become quite jittery and not fully complete the transformation, to the extent that I have to try two sometimes three times before it actually works as expected.

I also noticed this happen in the video, is there any specific reason this happens?

I thought that it could be something to do with when the element reaches a certain degree of rotation it loses the state of hover, if that makes sense, and thus not completing the full transform and reverting back to the original state.

Whether it's that or not I don't know, regardless, is there any way to ensure this doesn't happen? As I have implemented this on my own website and I find it could have negative effect on user experience.

Thanks

Susan Mashevich
Susan Mashevich
3,623 Points

Hi Nicole,

It would be helpful if you could provide the code you are referring to, however from your explanation I believe I had experienced a similar issue with the hover effect.

What worked in my case was applying the transition-delay property and adjusting the value to 1s, like this: transition-delay: 1s;

Hope above is helpful.

4 Answers

To whoever goes through this same issue. I'm pretty sure this is caused by your mouse no longer being above(:hover) the .photo element. Same goes when you apply a translateX(100%) on an element you hovered on, it'll leave your mouse which means you are no longer :hover-ing over it. In the video I'm pretty sure it should have been:

.photo-container:hover .photo { 
      /* transform here*/ 
}

since .photo-container never moves so your mouse is always above it.

Catalin Circu
Catalin Circu
6,744 Points

oh my god, this is exactly the answer I was looking for! Blessings!

paul oram
paul oram
3,429 Points

Yes this is the best answer! It solves the problem.

jaspergradussen
jaspergradussen
5,876 Points

Yeah I had the same thing, You want the hover effect to take place on the container of the img/photo/whatever, otherwise, the animation of the img/photo might make it that it 'avoids' your cursor and the animation might stop. So if it's set to the 'containing field' of the image, then the hover still applies.

Nicole Pearcy
Nicole Pearcy
6,895 Points

Thank you, Susan, this worked for me and I am now unable to reproduce the problem.

Susan Mashevich
Susan Mashevich
3,623 Points

Great. Glad it worked out :)