Bonzai

By default, a keyframe applies the Linear ease option. The Linear ease option makes steady change between the start and the end keyframe values.

Canvas supports the following easing options:

Linear – Changes steadily between the start and the end keyframes.

Ease In – Accelerates steadily from the starting keyframe towards the ending keyframe.

Ease Out – Decelerates steadily from the starting keyframe towards the ending keyframe.

Ease In Ease Out – Accelerates during first half of the animation and decelerates during the second half of the animation.

Back Ease In – Starts by going backwards a little and then accelerates steadily from the starting keyframe towards the ending keyframe.

Back Ease Out - Decelerates steadily from the starting keyframe towards the ending keyframe, overshoots the target area a little and returns.

Back Ease In Out - Starts by going backwards a little and then accelerates during first half decelerates during the second half of the animation overshooting the target area a little and returns.

Elastic Ease In – Starts with damped oscillation a few times at the starting keyframe and then accelerates steadily from the starting keyframe towards the ending keyframe.

Elastic Ease Out - Decelerates steadily from the starting keyframe towards the ending keyframe, overshoots the target area, and ends with damped oscillation a few times at the ending keyframe.

Elastic Ease In Out – Starts with damped oscillation a few times at the starting keyframe, accelerates during first half of the animation, decelerates during the second half of the animation, and ends with damped oscillation a few times at the ending keyframe.

Bounce Ease In – Bounces twice at the starting keyframe and accelerates steadily from the starting keyframe towards the ending keyframe.

Bounce Ease Out – Decelerates steadily from the starting keyframe towards the ending keyframe and bounces twice at the ending keyframe.

Bounce Ease In Out – Bounces twice at the starting keyframe, accelerates during first half of the animation, decelerates during the second half of the animation, and bounces twice at the ending keyframe.

- Linear – Changes steadily between the start and the end keyframes.
- Ease In – Accelerates steadily from the starting keyframe towards the ending keyframe.
- Ease Out – Decelerates steadily from the starting keyframe towards the ending keyframe.
- Ease In Ease Out – Accelerates during first half of the animation and decelerates during the second half of the animation.
- Back Ease In – Starts by going backwards a little and then accelerates steadily from the starting keyframe towards the ending keyframe.
- Back Ease Out - Decelerates steadily from the starting keyframe towards the ending keyframe, overshoots the target area a little and returns.
- Back Ease In Out - Starts by going backwards a little and then accelerates during first half decelerates during the second half of the animation overshooting the target area a little and returns.
- Elastic Ease In – Starts with damped oscillation a few times at the starting keyframe and then accelerates steadily from the starting keyframe towards the ending keyframe.
- Elastic Ease Out - Decelerates steadily from the starting keyframe towards the ending keyframe, overshoots the target area, and ends with damped oscillation a few times at the ending keyframe.
- Elastic Ease In Out – Starts with damped oscillation a few times at the starting keyframe, accelerates during first half of the animation, decelerates during the second half of the animation, and ends with damped oscillation a few times at the ending keyframe.
- Bounce Ease In – Bounces twice at the starting keyframe and accelerates steadily from the starting keyframe towards the ending keyframe.
- Bounce Ease Out – Decelerates steadily from the starting keyframe towards the ending keyframe and bounces twice at the ending keyframe.
- Bounce Ease In Out – Bounces twice at the starting keyframe, accelerates during first half of the animation, decelerates during the second half of the animation, and bounces twice at the ending keyframe.