Reverting to original position despite animation-fill-mode: forwards

[Historical Forums User]

Hello!
I have made this circular nav menu in which the buttons rotate around a circle. I have set the text in the buttons to simultaneously rotate in the opposite direction so that they stay upright. This works, however, they do not remain that way once the animation stops. I have tried every animation-fill-mode attribute I can think of but have not been able to fix this.

Here is the Codepen: http://codepen.io/adamlukem/pen/RWVyxZ

Any help would be much appreciated!

UPDATE: I just tested it in other browsers for the first time (previously using Chrome 45) and it doesn’t stay upright at all in those. So… anyone know how to make the words upright?

[Historical Forums User]

Thank you very much for looking at it. I just now fixed it by absolutely positioning the span.

Although now I’m noticing that I cannot seem to hover over the links in Safari. Hmm….

[Author]

Posts