javascript - 在 css 中使用 '' @keyframe play'' 时，如何使用 javascript 获取动画当前所在的帧？

Question

我正在使用以下代码制作一个带有 CSS Sprite 表动画的网站:

#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，因为以编程方式进行交互会更高效，并且如果您使用基于 requestAnimationFrame 的动画，现代浏览器中不会有任何明显的性能下降.

关于 getComputedStyle 的更多信息 on MDN .