Hover on, Hover off animation

[mcaravaglia]

Using the CSS below, I created an animation for a hover on/ hover off state. When the “Contact” menu item is hovered, a yellow bar appears in the header. In the html, the yellow bar is a child-element of the menu item.

When you hover-off the menu, the bar remains for 2 seconds and then disappears. This all works well and is the effect I am looking for. The issue I am having, is once the yellow bar appears, if I move the mouse to be hovering on the yellow bar itself, it flutters and jumps on the screen. I’m perplexed as to why this is happening. Hopefully, you can help.

/Animate dropbar/
@keyframes fadein {
0% {margin-top: -60px;}
100% {margin-top: 0px;}
}
@keyframes fadeout {
from {visibility: visible;}
to {visibility: hidden;}
}

#menucontact:hover #dropbar {
animation: fadein 1s;
animation-delay: 2s;
visibility: visible;
}
#menucontact #dropbar {
animation: fadeout 2s;
visibility: hidden;
}

[LearnTheNew]

i think it’s due to animation. can you provide in detail with codepen tool.

[mcaravaglia]

Thank you so much for responding. After client’s feedback, I realized this would be better achieved with Javascript, which I am not familiar with. I was able to use some basic code to achieve something close, however, I need to have a smooth transition when the graphic appears on hover, and again when it becomes hidden on mouse click. This should function like a window-shade, where the bar drops down smoothly from it’s hidden position and then returns when the mouse is clicked.

I created an example on codepen, as you suggested, and placed the link below. If you hover the word “Contact” you will see the yellow bar appear and when you click the background it becomes hidden. What I need to happen is for the yellow bar to move down vertically and smoothly. On the actual website, it’s starting position is up behind an opaque element, so, on hover, it should move down 60px and into view smoothly in about 2 seconds. There it should remain until the user clicks anywhere on the page and then it should move back up the same 60px until it disappears.

I was able to do this nicely with CSS, but could not get the element to remain visible until mouse click. That is why it seems javascript is better for this. I know there is a simple solution to this, but have been unable to figure it out. I’m happy to buy you lunch if you will help!

https://codepen.io/mcaravaglia/pen/BbOpMN

[Shikkediel]

Here’s some fiddling into what I think you described:

codepen.io/anon/pen/RdYLmM

Using transition is easier than keyframes…

[mcaravaglia]

Shikkediel,
Thank you so much for your kind reply. It appears what you have provided is exactly what I need. I am grateful for your assistance.

Michael

[Shikkediel]

No trouble at all. :-)

[mcaravaglia]

Shikkediel,
I have applied this to the website and it works perfectly; however, I do have one question (problem). The yellow bar that drops down into view will contain links the user will need to be able to access. The “window.onclick” function moves the bar out of view. I need the user to be able to click on the yellow bar and it should not move. Clicking anywhere else should move the yellow bar out of view.

How can I modify your script, so the yellow bar is an exception?

[Shikkediel]

I’ve added the tweak to the pen I posted earlier. 👍

[mcaravaglia]

Ah, you are a gentleman, thank you.

[Author]

Posts