These are used as a manual fallback in case getComputedStyle
isn't supported.
Generates a frame ID that is also used as a CSS class name.
Creates a style rule for an {@link AnimationKeyFrame}, if one does not already exist.
The keyframe to create the style block for, if one does not already exist.
Gets a hash key for an {@link AnimationKeyFrame}. This is used to uniquely identify the frame contents, rather than the frame instance. In other words, two different frame objects with the exact same properties and values are considered the same.
The animation keyframe to generate a key for.
Gets the current transition duration associated with and element. This is a relatively expensive operation and should ideally be avoided by manually specifying durations in keyframes.
The HTML element to compute duration from.
Sets up a property map to map between JavaScript and CSS property names. This allows animation keyframes to be defined in JavaScript using the JavaScript names of CSS properties. It also lets animation authors disregard prefixes.
Creats a style sheet to hold emitted classes.
Flushes CSS classes from the stylesheet that holds the keyframes. This ensures that the stylesheet does not grow too big over time.
Gets the CSS name for a JavaScript property name, e.g. returns background-color
for backgroundColor
.
Performs browser-based prefixing.
Returns the number of emitted keyframes that currently exist in the emission stylesheet.
An animation provider that executes animations using CSS Transitions in browsers that support them. Rather than interpolate between keyframe values and perform DOM IO every frame, as many animation libraries do,
CssTransitionAnimationProvider
executes animations by offloading as much work to the browser as possible via transitions. Read/write operations from/to the DOM are kept to a minimum and synchronized with animation frames via browsers'requestAnimationFrame
. The only DOM changes to elements being animated are changes to their CSS class names. Each keyframe in an animation is represented by a CSS class. Arbitrary, defined-in-code animations are handled by emitting keyframe properties and values into CSS classes inside of an internal style sheet.