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

Question

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.

Answer 1

Get the element you would like to get the current background-position for, and use:

getComputedStyle(element).getPropertyValue("background-position");

I might recommend recoding it to use JavaScript however, since it will be more efficient to interact with programmatically, and there won't be any noticeable performance hit in modern browsers if you use requestAnimationFrame based animation.

More information about getComputedStyle on MDN.