KeyframeEffect §

Tweens CSS properties of an element over time across an array of keyframes.

They can be nested within Animations, Groups and Sequences.

new KeyframeEffect(target, frames, options);

Arguments §

§ target

The Element being animated.

Can be null for animations that don't target an element but for example are Animation-triggered sounds.

§ frames
Array of Keyframes to use.
§ options

Either a Number specifying duration in milliseconds OR an Object specifying timing & behaviour.

For the full list of Object properties see KeyframeEffectOptions

var target = Element || null; var frames = [Keyframe, Keyframe /*, ... */]; var options = Number || KeyframeEffectOptions; var target = document.querySelector('div.target'); var keyframe = { opacity: 0.5 // Object with CSS properties basically }; var frames = [ { opacity: 0 }, { opacity: 1 } ]; var options = { duration: 2000, // in ms delay: 400, // in ms fill: 'forwards', // keeps css styles at end of anim easing: 'ease-out' // smooth out at end };

Examples §

Any ideas? Create a JSBin suggestion and/or tweet to @Nexii