Control keyframe animation progress via static interpolation

Question

Given you want to control the progress of a CSS keyframe animation by manipulating the animation-delay property while animation-play-state is set to paused.

This should:

• work in all browsers supporting the CSS Animations specification
• run with at least 30 frames per second for basic use cases

For reasons motivated by render performance and proper separation of concerns you want it not to:

• require the script to know anything about the CSS properties interpolated by the controlled keyframe animation
• parse stylesheets to obtain said knowledge
• run the animation on a hidden element and transfer read interpolated CSS property values to the target element

Problem

The animation-delay technique appears not to work with the following browsers (problems can be reproduced in both provided examples)

• Safari >= 8
• iOS Safari >= 8
• IE >= 10
• Microsoft Edge

Is there any way to produce the desired behavior for all browsers while fulfilling all requirements outlined above?

Technique

• https://css-tricks.com/debugging-css-keyframe-animations/
• https://www.youtube.com/watch?v=s4HdeJctq-A#t=26m53s

Examples

• http://codepen.io/team/css-tricks/pen/LVMMGZ/ (drag the slider)
• http://codepen.io/marionebl/pen/wKjBgQ (scroll down)

Answer 1

The problem

• the static interpolation technique outlined by Lea Verou does not work in browsers apart from Chrome and Firefox
• the specification does not cover the behavior of animation-play-state in combination with animation-delay unambiguously enough to call out IE and Safari for their deviating implementations. See http://www.w3.org/TR/css3-animations/#animation-delay and http://www.w3.org/TR/css3-animations/#animation-play-state

The solution

To partially cover the requirements outlined above I implemented a library called jogwheel that allows for timeline control of animations declared via CSS keyframe animations. To achieve this jogwheel does the following:

• Get computed animation-name for a given HTMLElement
• Search document.styleSheets for matching CSSKeyFramesRules
• Transform the found CSSKeyFrameRule to an array of keyframes compatible with the upcoming element.animate, which is part of the proposed WebAnimations standard
• Provide an API that allows for control of the animation in relation to its timeline length

To use jogwheel you'll have to

Install the library:

npm install --save jogwheel web-animations-js

In your JavaScript:

// WebAnimations polyfill required
require('web-animations');
var JogWheel = require('jogwheel');

var element = document.querySelector('[data-animated]');
var wheel = JogWheel.create(element);
// Jumps midway into animation
wheel.seek(0.5);