A quick intro to CSS animations
CSS animations are based on keyframes that define the style of the animated element
at different stages of the animation. Only animatable properties
will be taken into account, though. Not all of them have the same impact on performances when getting animated, though.
You define the set of keyframes for a specific animation using the
You can notice that keyframe position in the animations are defined in percent, not time units.
The actual time of the animation is set on the animated element, along with the set of keyframes
to use (among other properties, using the
Triggering an animation
animation property on your element, using the
animation-… properties this way, which allows you a bit more control on what you set/orverride.
animation property on the element.
CSSOM provides a handy
insertRule for dynamically adding CSS rules (provided you already have a stylesheet in your page in which to insert the rule, which is often the case). I prefer inserting
<style> tags, which make it easier to remove the animation definition once they’re over (CSSOM
deleteRule function works using an index, not ideal if your animations don’t finish in the order they started).
In both cases, you’ll need to generate a String containing the
Wrapping it up