Animate an element or multiple elements to a specific target.
By passing a single keyframe, the element will animate from its current style to those defined in the keyframe:
By defining a value as an array, it'll animate through each keyframe in turn:
null is a special wildcard. As the first keyframe, it'll be replaced by the current value as read from the DOM.
null values will be replaced by the previous keyframe. Useful for keeping a style static for some of the animation. This way, you only have to change it in one place if you want to tweak the animation.
By default, each of these keyframes will be spaced evenly throughout the animation. It's also possible to specify a list of
offsets, values between
1, that defines a relative point in the animation a specific keyframe should be hit:
If there are fewer keyframes than offsets defined in
offset, the other keyframes will be spaced evenly:
It's also possible to define easing between specific keyframes by defining an easing option as any array:
Options can be defined either for all values:
Or overridden for individual values:
A duration, in seconds, that the animation will take to complete.
A duration, in seconds, that the animation will be delayed before starting.
When animating multiple elements, the
stagger function can be used to offset the delay by increasing amounts across each element:
A duration, in seconds, that the animation will wait at the end before ending.
An easing function to use, or list of easing functions to use for individual keyframes.
- Basic function names:
- Cubic bezier curve: e.g.
- Stepped easing: e.g.
The direction of animation playback.
The number of times the animation should repeat. Set to
Infinity to repeat indefinitely.
A duration, in seconds, to stagger the animation of each provided element.
Note: This option cannot currently be overridden per value.
Because of numerous timing bugs in Webkit's accelerated animations, these are disabled by default in Webkit-powered browsers.
However, if the your animation is being disrupted by heavy processing, you can allow acceleration with this setting. It's advised you test these animations thoroughly in both Safari and iOS Chrome.
If and when Webkit's implementation improves, this option will default to
animate returns animation controls
Stay updated with the Motion One newsletter. We don't spam, and unsubscription is instant.