What are property keyframes in anime.js?

Anime.js is a Javascript library that lets us easily create animations. To make complicated animations, we can break down the animation into multiple keyframes or steps where each frame is responsible for some visual effect.

Animation keyframes execute these frames one after the other. On the other hand, property keyframes allow frames to overlap to produce more exciting effects.

Syntax

Similar to animation keyframes, we provide keyframes as a list of objects. However, each property in the animation is provided with its list of keyframes.

The code below describes the syntax:

Here, the property is any valid anime.js property, and we provide it with a list of objects. Each object is a keyframe.

The value key in each keyframe is the value for the property. For example, for the translateX property, some_value represents the pixel position to move horizontally. For the rotate property, some_value represents the degree of rotation.

Any property parameter can optionally accompany the value key.

Note: The duration, delay, and endDelay property parameters are essential for creating animations using property keyframes.

Rules of overlap

To create animations using property keyframes, we must first understand some rules. We explain each rule using an example.

1. The keyframes for a single property are executed one after the other.

We provide the translateX property with three frames. First, it moves horizontally to $500$ px, then back to $0$ px, and finally back to $500$ px.

2. If no delay parameter is specified, the first keyframe for all properties starts simultaneously.

Here we have two properties: translateX and translateY, each with a single keyframe. Since neither frame has the delay property, the frames of both properties start simultaneously when the animation begins. Hence, we see a diagonal motion.

3. If no duration parameter is specified, the total duration is divided equally amongst the keyframes of each property.

Here, we provide the translateX property with three keyframes and the translateY property with two keyframes. We set the animation's duration to $3000$ ms. Because translateX has three frames, each frame gets a duration of $1000$ ms. Similarly, each frame in translateY gets a duration of $1500$ ms.

If some frames have a duration while others don't, the division still occurs in the same manner. However, frames will give precedence to the duration parameter specified for them.

4. We can use the timing-related parameters duration, delay, and endDelay to control how and when the different keyframes overlap.

In the above animation, the horizontal movement caused by the translateX property does not overlap with the vertical movement caused by translateY.

This is because the translateX keyframe has a duration of $1000$ ms, while the translateY keyframe has a delay of $1000$ ms.

Example

We can now use the above rules to create an animation with multiple overlapping keyframes.

In the example below, we animate a box to do the following:

1. Move right

2. Stop, spin and change color

3. Move right again

4. Stop, spin and change color

Explanation

In the HTML section, we create a box using a <div> tag and style it using the box class.

In the JavaScript section, we animate the box using the anime() function.

• Line 2: We target the box using its class.

• Lines 3–6: We create a list of keyframes for the translateX property.

  • Line 4: We define the first keyframe with a value of $250$ px, a duration of $500$ ms, and a delay of $1000$ ms. Since this is the first frame, the delay is relative to the start of the animation.

  • Line 5: We define the second keyframe with a value of $500$ px, a duration of $500$ ms, and a delay of $1000$ ms. Since this isn't the first frame, the delay is relative to the end of the previous frame in the list.

• Lines 7–10: We create a list of keyframes for the rotate property.

  • Line 8: The first keyframe is given a value of $360$ degrees, a duration of $1000$ ms, and a delay of $1500$ ms. It is the first frame, the delay is relative to the start of the animation.

  • Line 9: The second keyframe is created with a negative value to make it spin in the opposite direction. The delay is set to $500$ ms. Since this isn't the first frame in the list, the delay is relative to the end of the previous frame.

• Lines 11–14: Similarly, we create a list of keyframes for the backgroundColor property. Since we want this property to overlap precisely with the rotate property, their frames have the same duration and delay as the rotate frames.

The illustration below summarizes each frame's order of execution.