Easing functions are used in CSS transitions and animations to control the speed of the transition or animation at different points during its duration. By default, CSS transitions and animations happen in a linear fashion, but easing functions allow you to add a more natural feel to the movement by adjusting the speed at different intervals. In this article, we will explore the most commonly used easing functions in CSS and how they affect the timing of animations and transitions.
Easing functions define how an animation progresses over time. Instead of a constant speed (linear), easing allows for changes in speed, such as starting slow and ending fast or vice versa. This makes animations appear smoother and more realistic. Easing functions can be used with the transition-timing-function property in transitions and the animation-timing-function property in animations.
There are several built-in easing functions that you can use in CSS:
The linear easing function causes the animation to progress at a constant speed from start to finish. It’s the simplest easing function with no acceleration or deceleration.
.box {
transition: transform 2s linear;
}
In this example, the animation will happen at a constant speed over 2 seconds.
The ease function starts slowly, accelerates in the middle, and slows down at the end. It’s the default easing function in CSS and is ideal for creating a smooth, natural effect.
.box {
transition: transform 2s ease;
}
With this easing function, the animation will feel natural with a smooth start and end.
The ease-in function starts slowly and accelerates toward the end. This is useful when you want to create the effect of an object gradually gaining speed as it moves.
.box {
transition: transform 2s ease-in;
}
In this example, the transition will start slowly and then speed up towards the end.
The ease-out function starts quickly and slows down toward the end. This is commonly used when you want to give the effect that something is coming to a smooth stop.
.box {
transition: transform 2s ease-out;
}
This easing function causes the animation to start fast and slow down at the end, making it ideal for deceleration effects.
The ease-in-out function combines both ease-in and ease-out. It starts slow, speeds up in the middle, and slows down at the end. This easing function provides a smooth start and finish with an accelerated middle portion.
.box {
transition: transform 2s ease-in-out;
}
This is one of the most commonly used easing functions because it produces a smooth and visually pleasing effect.
The cubic-bezier function allows you to define a custom easing curve by specifying four values. These values represent control points for the cubic Bezier curve. The syntax is cubic-bezier(x1, y1, x2, y2), where x1, y1, x2, and y2 are numbers between 0 and 1.
For example:
.box {
transition: transform 2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
This example creates a custom easing curve with the cubic-bezier function, giving you full control over the easing behavior of your animation.
The steps function divides the transition into a specified number of steps, rather than having a smooth transition. This is useful for animations that should appear as if they happen in discrete steps, like a frame-by-frame animation.
.box {
transition: transform 2s steps(4);
}
This example will cause the transition to occur in 4 discrete steps, rather than smoothly, creating a choppy effect like frames in an animation.
You can apply easing functions in CSS to both transitions and animations. For transitions, you use the transition-timing-function property, while for animations, you use the animation-timing-function property. Here's an example of using an easing function with a transition:
.box {
transition: background-color 1s ease-out;
}
.box:hover {
background-color: red;
}
In this example, the background color of the .box element will transition from its initial color to red, with a fast start and slow end, using the ease-out easing function.
Here’s a summary of the most common easing functions in CSS:
Easing functions are a powerful way to control the speed and feel of transitions and animations in CSS. By using different easing functions, you can create more dynamic and engaging web experiences. Whether you want smooth transitions, fast accelerations, or discrete steps, easing functions give you full control over how animations are timed and presented to the user.