Issue animating div from off page that is jumpy

HTML & CSS
1

Hi there,

I have the following div that starts hidden slightly off page and when the user hovers it, it slides down.

However, when the user hovers and then moves the mouse away, the animation jumps back and doesn’t look good. Is there a way to create the animation slide back upwards smoothly without the jumpiness?

It is also looping which I don’t like. I would like it to just slide down and stay there until the user does a
mouse-out. I have tried this, to make it play once, but it seems to be looping.

animation: updown 2s ease 1;

Can anyone helep me with this?

Thanks!

2

I can’t help with the animation effects, but you need to ensure your animation is triggered by :focus as well as :hover, or it will be inaccessible to keyboard users.

1 Like
3

Lose the animation and just transition it.

a.gingy-top{
  position: absolute;
    top: -122px;
    left: 570px;
    display: flex;
    align-items: flex-end;
    z-index: 100;
    transition:all 1s ease;
}
 a.gingy-top:hover{
     transform: translateY(50px);
}

As mentioned above you will want to add :focus to that rule also.

2 Likes
4

Great, thank you, I should have thought of that!

That worked perfectly, thank you :slight_smile:

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.