CSS transition stops abruptly

Question

I've added a fullscreen overlay navigation to my little blog, and I've used this code: http://tympanus.net/Development/FullscreenOverlayStyles/index.html

As you can see, the transition is very smooth, especially when you close the overlay. But on my site the closing animation stops abruptly: (click on the icon next to the logo)

http://blog.thomasveit.com/

I tought the problem could be the height of an element as I know that this is a common problem with Javascript/jQuery animations, but that didn't solved the problem...

Anybody an idea what the problem could be?

Answer 1

Note this code in your bootstrap CSS file (line 4908)

.close:hover,
.close:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

This sets the opacity of a .close element to 0.5 onHover. Your shade just so happens to have this class, and while it is onScreen, you are hovering over it, setting its minimum opacity to 0.5 until it is removed. If you click close and then quickly move your mouse out of the browser window, the transition is perfect.

Note that this class (.close) is added to the element when the close button is clicked and removed when the element disappears completely.

As soon as it is removed from the DOM, you stop hovering over it, but at that point, the last 50% opacity is removed instantly.

Remove opacity: 0.5; and filter: alpha(opacity=50); and the transition is steady.

Answer 2

I think you should not combine things like visibility: hidden or display:none with an opacity animation. What happens if you only use opacity without all the visibility attributes. Reason why this animation stops abruptly is because of the other execution of the other rules also. Right when your animation is executing.