使用＆＃39; @keyframe play＆＃39;＆＃39;在css中，如何使用javascript获取动画当前所在的帧？

Question

我正在使用以下代码编写带有css精灵表动画的网站：

#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; }
}

我尝试做的是让脚本持续监控当前的背景位置（也就是帧），当它处于特定值（例如40 px）时，触发一个事件。

如何使用javascript访问当前的背景位置值？除了仅使用javascript重新编码所有内容之外，我无法在线找到任何内容。

Answer 1

获取您想要获取当前background-position的元素，并使用：

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

我可能会建议将其重新编码为使用JavaScript，因为以编程方式进行交互会更有效率，如果您使用基于requestAnimationFrame的动画，则在现代浏览器中不会出现明显的性能损失。

有关getComputedStyle on MDN的更多信息。