CSS easing (also timing function) can bring a huge effect on the feel of change. In this tutorial, you’ll learn about CSS easing in Saola Animate.
This tutorial covers:
What is CSS Easing?
In reality, 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. CSS easing specifies the speed at which a transition progresses over time. In other words, CSS easing lets a transition effect change speed over its duration, bringing life to animations.
By default, Saola Animate uses Linear easing to define a transition with the same speed. In other words, there is no acceleration from start to end. For more dynamic movements, Saola Animate offers up to 40 timing functions.
To customize easing, in the Timeline pane, do the following:
Step 1: Select one or more animation segments.
Step 2: Click the Easing button. You can also right-click the segments > Easing….
Step 3: In the Easing Animation dialog, select the easing you want.
Note: You apply a timing function to control the speed of the transition. Therefore, if a segment contains no transition, the timing function will be disabled. To remove or create transition, right-click a segment and select the corresponding options.
By default, transition allows an element to gradually change from one state to another over time. Without transition, the property will jump to the ending value at the ending keyframe. In other words, the property stays unchanged until the ending keyframe is encountered, making an instant change in the property value.
Timing Functions in Saola Animate
In Saola Animate, timing functions come in ten types, each of which has four values:
- Ease in speeds up from zero speed, then finishes at full speed.
- Ease out starts at full speed, then slows down to zero speed.
- Ease in-out starts slowly, reaches fastest in the middle, then finishes slowly. In other words, the transition speeds up until halfway, and then slows down.
- Ease out-in starts and ends fast, but becomes slow in the middle. In other words, the transition slows down until halfway, and then speeds up.
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.
That’s CSS easing in Saola Animate. Don’t forget to pick the right easing to create stunning animations.