CSS Animations fired from play, end and pause events are flaky

[thoughtassassin]

I am trying to get a div with a "nameplate" to slide over the top of my videos in a videojs playlist. This seems to work in my codesandbox example while running it on codesandbox. However, when I download the project and run npm i I see that sometimes the animation renders and sometimes it will not.

I tried this in an app that I am working on prior to creating the codesandbox. I saw the intermittent success and failure in the app. This is the same behavior that I notice when I export and run the codesandbox locally.

Why would the animation be so unreliable?

The codesandbox is here: https://codesandbox.io/s/videojs-animations-vtff8r

If you upload a few mp4s it should store the files in indexeddb. Once uploaded you should be able to see the div with the word Nameplate animate when each video begins to play.