When using ''@keyframe play'' in css, how can you get the frame the animation is currently at with javascript?

I'm doing a website with a css sprite sheet animation using the following code:

#video{
  width: 426px;
  height: 240px;
  margin: 2% auto;
  background: url("spritesheet/sheetTest.png") left center;
  animation: play 1s steps(28) infinite;
}

@keyframes play {
    from {
        background-position: 0px;
    }
    to { background-position: -11956px; }
}

What I'm trying to do is to have a script that constantly monitor the current background-position(aka the frame) and when it is at certain value (eg 40 px), trigger an event.

How can I access the current background-position value with javascript? I can't find anything online other than re-code everything using only javascript.