So far, you’ve been guided through the steps to create HTML5 animation in Saola Animate. In this tutorial, we’re going to learn about customizing CSS easing functions (also known as CSS animation timing functions, or simply timing functions). With the right easing, you will take your HTML5 animation to the next level, for sure.
This tutorial covers:
- What is a CSS Easing Function?
- CSS Easing Functions in Saola Animate
- Customizing CSS Animation Timing Functions
What is a CSS Easing Function?
An animation is composed of two keyframes for the property’s starting and ending values. In Saola Animate, the animation has a transition effect by default. It makes a property value linearly change with time. But, how do all these things relate to CSS easing function?
The answer is simple. It’s because CSS easing function specifies the speed at which a transition progresses over time. That is, CSS easing function, aka CSS animation timing function, lets a transition effect change speed over its duration.
In reality, when moving, things almost never move at an unchanging speed. For example, when a bus comes to a stop, it slows down before a full stop. And when setting off again, it speeds up to a full speed. So, to mimic realistic dynamic movements, it’s necessary to choose a right animation timing function.
CSS Easing Functions in Saola Animate
By default, Saola Animate uses Linear CSS easing function to define a transition. As the name implies, this default animation timing function maintains the same speed throughout the transition. It’s steady with no acceleration from start to end.
For more dynamic movements, Saola Animate offers up to 40 CSS easing functions. They are divided into ten easing types:
1. Quad: Display a quadratic transition.
2. Cubic: Display a cubicular transition.
3. Quart: Display a quartetic transition.
4. Quint: Display a quintic transition.
5. Sine: Display a sinusoidal transition.
6. Expo: Display an exponential transition.
7. Circ: Display a circular transition.
8. Elastic: Display an elastic transition that looks like a spring swinging back and forth until coming to rest.
9. Back: Display a cubicular transition with backward motion, overshoot, and settle.
10. Bounce: Display a parabolic bounce, simulating the motion of an object bouncing.
As you can see, each easing type has four values:
- Ease in: Speed up from zero speed, then finish at full speed.
- Ease out: Start at full speed, then slow down to zero speed.
- Ease in-out: Start slowly, fastest in the middle, then finish slowly. In other words, the transition speeds up until halfway, and then slows down.
- Ease out-in: Start and end fast, but slow in the middle. In other words, the transition slows down until halfway, and then speeds up.
Customizing CSS Animation Timing Functions
Below are the steps to customize CSS animation timing functions in Saola Animate.
Step 1: Select a segment (1) that you want to customize its timing function. Select more than one segment by holding down CTRL while clicking.
Step 2: In the Timeline pane, do either of the following:
- Click the Easing button (2).
- Right-click the selected segments, then select Easing… (3) from the context menu.
Both the operations open the Easing Animation dialog box. It lists out all animation timing functions in Saola Animate.
Step 3: Select your desired easing function (OutCubic) (4).
After that, the Easing button displays an illustration of the selected easing function. Hover over the button, a tooltip (5) appears showing the name of the easing function.
CSS easing function allows you to control the speed of a transition. Therefore, if a segment contains no transition, the easing will be disabled. The following image shows the visual difference between segments with and without a transition (segment (6) and (7) respectively). It’s obvious that the two segments have different fill styles.
Though an animation contains a transition effect by default, you can remove this effect if needed. As mentioned earlier, the transition makes a property gradually change from one value to another over time. For that reason, if an animation contains no transition, the property will jump to the ending value at the time of the ending keyframe. In other words, the property stays unchanged until the ending keyframe is encountered.
To work with a transition, right-click a segment and do either of the following:
- Click Create Transition (8) to make an element gradually change from one state to another over time.
- Click Remove Transition (9) to create an instant change in the property value.
That’s CSS easing function aka animation timing function in Saola Animate. Easing can bring about a huge effect on the feel of change. So, don’t forget to pick the right easing function to create stunning animated HTML5 content.