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 );
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 );
The Element being animated.
Can be null for animations that don't target an element but for example are Animation-triggered sounds.
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
};