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


Tags: javascript,css,animation,web,sprite-sheet

Problem :

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.



Solution :

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.


    CSS Howto..

    Django Allauth - How to add custom css class to fields?

    How to modify your CSS working with Mobile Angular UI and Bootstrap

    How to position my image below and to the right of my text?

    How to make the CSS Dropdown same size as it's parent

    How to prevent page jump when using # href to swap gallery images using a div ID?

    IE8 and lower showing background white

    Canvas distorts drawing. How do I get the scale factor between the set size and the styled size?

    How should I convert this PSD to HTML & CSS Menu

    How to correctly add nested divs

    How to keep a flex item from overflowing due to its text?

    How to stack an overlay over html5 video

    How to use div classes to get my blocks to line up?

    How to make one file compatible with different browsers?

    how do I get plus sign in rectangle in css?

    How can I center my icon horizontally and vertically?

    How to set
  • Backgound color?
  • how change css href to all .html documents with button click?

    In CSS, how to select a particular tag under mutiple ids?

    How to minify and combine commented out css files

    CSS - how to avoid class= for every single paragraph?

    How to get background image/ image to stretch to fill container via CSS?

    Images don't show up in quiz results after start over button

    How to reference CSS from libraries installed via npm?

    How to draw arrows in CSS [closed]

    How to remove this head css styling with javascript?

    How to add sub-menu (css) under actual sub-menu in WordPress

    How to keep animated gifs animated while scrolling on iOS devices?

    How does a browser determine which cursor to use if multiple are set via CSS?

    Explaining how to use classes with SASS to a Python thinker

    Floating divs, different height, building from left to right. how to fill vertical gaps between levels?