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

原文 标签 javascript css animation web sprite-sheet

我正在使用以下代码制作一个带有 css sprite 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 重新编码所有内容之外,我在网上找不到任何内容。

最佳答案

获取想要获取当前元素的元素 background-position用于和使用:

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

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

更多信息getComputedStyle on MDN .

关于javascript - 在 css 中使用 '' @keyframe play'' 时,如何使用 javascript 获取动画当前所在的帧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31665969/

相关文章:

jquery - :visible not working with :nth-child selector

css - 如何提取不属于子节点的文本?

css - 在循环中以纯 css3 顺序动画元素

c++ - 如何使用Assimp获取模型动画?

javascript - 如何使用javascript或jQuery获取IE浏览器的文件大小?

javascript - 对模板中的数字求和

javascript - html5-canvas 背景不覆盖整个页面

javascript - D3.js饼图反向动画

android - Android动画太慢\背景缓慢

javascript - 获取标记名名称值javascript