Adarsh MEveryone wants attention these days, and webpages are no exception. Grabbing user attention is crucial in this era where attention spans are notably short.
CSS animations make it easy to create engaging visuals, enabling you to capture user attention and keep them engaged with your website’s content. Most of the CSS animations depend on the animation timing-function property used, as it is what makes the overall flow of the animation.
In this detailed blog post on CSS animation timing functions, we will explore various CSS timing functions and also learn how to create custom CSS timing functions.
Without further ado, let’s get started.
What exactly is a timing-function in CSS
CSS timing functions are an integral part of web animations. They are responsible for controlling the speed and pacing of an animation over its duration like how slow or fast it should propagate.
These functions also allow you to define how the intermediate values of the animated CSS properties are calculated, thereby shaping the overall feel of the animation. There are mainly two types of timing functions:
- transition-timing-function: The transition-timing-function specifies the speed curve of a transition effect.
- animation-timing-function: The transition-timing-function specifies the speed curve of a keyframe animation.
Timing functions are used to make the motion more natural and visually appealing. CSS timing functions manipulate the animation’s progression.
For instance, an ease-in function makes the movement start slowly and then accelerate, which can be ideal for elements entering the viewport. On the other hand, ease-out is perfect for elements leaving, as it starts fast and then slows down, giving a sense of settling into place.
Syntax
Selector {
animation-name: name-of-animation;
animation-duration: duration;
animation-timing-function: timing-function;
/* Other animation properties */
}
Predefined CSS Timing Functions
CSS has mainly 8 readily available timing functions, which you can use to animate the element. Let’s now delve into each of them.
Linear
In the linear animation timing function, the animation proceeds at a constant pace from start to finish, ensuring a steady and uniform progression. It is ideal for when a smooth and consistent motion is desired without any sudden acceleration or deceleration.
Syntax
.element {
animation-timing-function: linear;
}
Here is an example
HTML
<html><body>
<div class=“container”>
<div class=“path”></div>
<div class=“rect”></div>
</div>
</body>
</html>
CSS
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
.container {
position: relative;
width: 100%;
height: 80px;
}
.path {
width: 100%;
height: 12px;
background-color: red;
position: absolute;
top: 50%;
animation: movePath 5s linear infinite;
}
.rect {
width: 50px;
height: 50px;
background-color: #3498db;
position: absolute;
top: 50%;
left: 0;
animation: moveRect 5s linear infinite;
}
@keyframes movePath {
0% {
left: 0;
transform: translateY(-50%);
}
100% {
left: 100%;
transform: translateY(-50%);
}
}
@keyframes moveRect {
0% {
left: 0;
transform: translateY(-50%);
}
100% {
left: 100%;
transform: translateY(-50%);
}
}
Output
Live Link: https://codepen.io/adarsh-gupta101/pen/PoLENVR
Ease
Ease is the default animation timing function if none is specified. The animation here starts slowly, gradually accelerates in the middle, and then slows down again towards the end.
It is suitable for most natural-looking animations, mimicking real-world dynamics like objects moving under the influence of gravity.
Syntax
.element {
animation-timing-function: ease; /* This is also the default value if not specified */
}
Let’s update the above example and change the animation timing function to ease.
.path {
width: 100%;
height: 2px;
background-color: red;
position: absolute;
top: 50%;
animation: movePath 5s ease infinite;
}
Output:
Live Link: https://codepen.io/adarsh-gupta101/pen/zYbpqXv
Ease-in
The ease-in timing function is another predefined timing function available in CSS animations and transitions. The animation starts slowly and accelerates gradually until it stops abruptly at the end.
It is useful when you want to draw attention to the end of an action, making the closure more pronounced.
.element {
animation-timing-function: ease-in;
}
Let’s update the previous code to ease-in
.path {
width: 100%;
height: 2px;
background-color: #ccc;
position: absolute;
top: 50%;
animation: movePath 5s ease-in infinite;
}
Output
Ease-out
While ease-in starts slow and speeds up, ease-out begins quickly and then slows down.
The animation starts quickly and decelerates towards the end, settling into its final state gently.
It is perfect for initiating a sequence or when the beginning of the animation should catch the user’s eye.
.element {
animation-timing-function: ease-out;
}
Ease-in-out
As the name suggests, the ease-in-out function is a combination of both ease-in and ease-out. The animation starts and ends slowly, with an acceleration in the middle.
The ease-in-out animation is ideal for subtle transitions, where you want a smooth and refined animation without abrupt starts or stops.
Syntax
.element {
animation-timing-function: ease-in-out;
}
Let’s add ease-in-out as the timing function
.path {
width: 100%;
height: 2px;
background-color: #ccc;
position: absolute;
top: 50%;
animation: movePath 5s ease-in-out infinite;
}
Output
Live Link: https://codepen.io/adarsh-gupta101/pen/dyrJXGV?editors=1100
Steps
The steps() function in CSS is a timing function used with animations and transitions to create a stepped or frame-by-frame effect.
Instead of having a smooth transition or animation, steps() allow you to define how many keyframes (or steps) there are between the start and end of a transition.
Syntax
.element {
animation-timing-function: steps(number_of_steps, start|end);
}
Step-start
In step-start function, the animation jumps to the end value at the start of the animation.
It is best suited for non-smooth, abrupt transitions that might represent a mechanical or step-wise process.
Syntax
.element {
animation-timing-function: step-start;
}
Step-end
Here the animation maintains the initial state until the end, where it instantly jumps to the final state. It is similar to step-start, but the abrupt transition occurs at the end of the animation.
Syntax
.element {
animation-timing-function: step-end;
}
Need for Custom CSS Timing Function
The predefined timing functions in CSS, such as ease, linear, ease-in, ease-out, and ease-in-out, can sometimes feel like wearing a one-size-fits-all outfit. They work, but might not provide the unique style and personality your website requires. Here, custom timing functions offer a solution, with more customizable options that suit your design.
Besides aesthetics, these custom functions can enhance usability. A well-timed animation can guide a user’s attention, create a sense of progress in loading screens, or make transitions feel more natural and less jarring.
Predefined timing functions can feel somewhat limiting. They offer consistency and simplicity, which is great for many situations, but sometimes you need that extra flair that gives animations a natural touch.
Creating Custom timing function using cubic-bezier()
To make animations look more natural, like an object falling and bouncing, we need more than just constant speed or simple ease functions. This is where the cubic-bezier() function comes in handy.
The cubic-bezier() function in CSS allows for precise control over the acceleration curve of an animation. Cubic-bezier() lets you control an animation’s speed over time with four points, making it speed up or slow down exactly how you want. It’s more flexible than the basic options like linear or ease.
By using cubic-bezier(), you can design animations that move just like things in the real world, making your website feel more dynamic and engaging.
Syntax
.element {
animation-timing-function: cubic-bezier(p1, p2, p3, p4);
}
Here the cubic-bezier(p1, p2, p3, p4) is the timing function where p1, p2, p3, and p4 are four points that define the shape of the cubic Bézier curve.
These points are actually two pairs of numbers:
- p1 and p2 (the first pair) represent the x and y coordinates of the first control point.
- p3 and p4 (the second pair) represent the x and y coordinates of the second control point.
Now, let’s take a look at an example that showcases all the animation-timing function properties.
HTML
<html>
<body>
<div class=“wrapper”>
<p>animation-timing-function:ease</p>
<div class=“ball ease”></div>
</div>
<div class=“wrapper”>
<p>animation-timing-function:ease-in</p>
<div class=“ball ease-in”></div>
</div>
<div class=“wrapper”>
<p>animation-timing-function:ease-out</p>
<div class=“ball ease-out”></div>
</div>
<div class=“wrapper”>
<p>animation-timing-function:ease-in-out</p>
<div class=“ball ease-in-out”></div>
</div>
<div class=“wrapper”>
<p>animation-timing-function:linear</p>
<div class=“ball linear”></div>
</div>
<div class=“wrapper”>
<p>animation-timing-function:step-start</p>
<div class=“ball step-start”></div>
</div>
<div class=“wrapper”>
<p>animation-timing-function:step-end</p>
<div class=“ball step-end”></div>
</div>
<div class=“wrapper”>
<p>animation-timing-function:steps(6,jump-none)</p>
<div class=“ball steps”></div>
</div>
</div>
<div class=“wrapper”>
<p>animation-timing-function:cubic-bezier(.05, .8, .1, .95)</p>
<div class=“ball cubic”></div>
</div>
</body>
</html>
CSS:
.wrapper{
border:1px solid black;
margin:4px;
display:flex
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: green;
position: relative;
animation: Animation 4s;
border:2px solid white;
}
.ease {
animation-timing-function: ease;
animation-iteration-count: infinite;
}
.ease-in {
animation-timing-function: ease-in;
animation-iteration-count: infinite;
}
.ease-out {
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}
.ease-in-out {
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.linear {
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.step-start {
animation-timing-function: step-start;
}
.step-end {
animation-timing-function: step-end;
animation-fill-mode: forwards;
}
.steps {
animation-timing-function: steps(6,jump-none);
animation-iteration-count: infinite;
}
.cubic {
animation-timing-function: cubic-bezier(.05, .8, .1, .95);
animation-iteration-count: infinite;
}
@keyframes Animation {
0% {left: 0px; top: 0px;}
100% {left: 450px; top: 0px;}
}
Output:
Live Link: https://codepen.io/adarsh-gupta101/pen/LYaeZLz
You can go to cubic-bezier.com for creating custom timing functions that can enable you to design Bezier speed curves. This interactive tool allows you to adjust the handles and experiment until you find a curve that suits your needs.
You can preview and compare it with the default easing functions, then simply copy and paste it into your project for immediate use.
Wrapping it Up
Thanks for checking out this blog. In this comprehensive guide, we have delved into various essential concepts related to CSS timing functions.
We explored several built-in CSS timing functions, such as ease, linear, and ease-in-out, and also discussed how to create custom timing functions using the Cubic Bezier curve. This blog is an excellent starting point for learning about CSS timing functions.
Keep learning
Ajay Yadav
Add comment