(Last Updated: September 25, 2017)

Saola Animate is an HTML5 animation creation tool for animated, interactive HTML5 content. The tool helps create great web content using the combination of HTML5 (structure), CSS3 (visual style), and JavaScript (interactive behavior).

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.

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.

css easing function linear

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.

css easing function quad

2. Cubic: Display a cubicular transition.

css easing function cubic

3. Quart: Display a quartetic transition.

css easing function quart

4. Quint: Display a quintic transition.

css easing function quint

5. Sine: Display a sinusoidal transition.

css easing function sine

6. Expo: Display an exponential transition.

css easing function expo

7. Circ: Display a circular transition.

css easing function circ

8. Elastic: Display an elastic transition that looks like a spring swinging back and forth until coming to rest.

css easing function elastic

9. Back: Display a cubicular transition with backward motion, overshoot, and settle.

css easing function back

10. Bounce: Display a parabolic bounce, simulating the motion of an object bouncing.

css easing function bounce

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.

css animation timing function 1

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.

css animation timing function 2

Both the operations open the Easing Animation dialog box. It lists out all animation timing functions in Saola Animate.

css animation timing function 3

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 animation timing function 4

Note:

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.

transition effect in animation segment

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.

create remove transition

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.

Join our mailing list to receive the latest news and updates from our team.

A confirmation email has been sent to your mailbox, please confirm your subscription!

Pin It on Pinterest