在 css 中使用“@keyframe 播放”时，如何使用 javascript 获取动画当前所在的帧？

Question

我正在使用以下代码制作一个带有 css 精灵 sheet 动画的网站：

#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 像素）时，触发一个事件。

如何使用 javascript 访问当前背景位置值？除了仅使用 javascript.

重新编码所有内容外，我在网上找不到任何东西

Answer 1

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

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

我可能会建议重新编码以使用 JavaScript 但是，因为以编程方式进行交互会更有效，并且如果您使用 [=12= 在现代浏览器中不会有任何明显的性能影响] 基于动画。

有关 getComputedStyle on MDN 的更多信息。

在 css 中使用“@keyframe 播放”时，如何使用 javascript 获取动画当前所在的帧？

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

javascript

css

animation

web

sprite-sheet