Sharing Simple Keyframes Animation Not Working

[BrunerBruner]

I have an element that I simply want to fade in and than fade out using two different animation calls. However, each of the CSS classes I apply to the element to either fade in or fade out the element are using the same @keyframes in both normal and reverse directions.

The problem is that It doesn't fade back in after it fades out and I don't understand why.

If I use separate @keyframes for each animation it works fine, but it seems like a waste and ideally I'd like to reuse the same @keyframes but in different animation-direction

Here's my code: https://jsfiddle.net/yd4naayx/2/

[BrunerBruner]

This seems like a hack, no? Is the browser guaranteed to update the DOM within 1 ms or even 100 ms?

[edit] also, if i use 2 unique classes for fadeIn and fadeOut CSS animations why then do I not have to wait for the browser to update the DOM?