We use cookies to enhance your experience on the site

animation-timing-function

Imagine how the ancient Egyptians transported enormous stone blocks for building pyramids. Some blocks slid at a constant, even speed on wooden rails - that's the equivalent of

linear

. Others started slowly as the workers were just building momentum, then accelerated - that's

ease-in

. Still others rushed at the beginning but slowed down during precise positioning - that's

ease-out

The

animation-timing-function

property in CSS enables exactly this kind of control over the animation's pace, defining how intermediate values are calculated during the animation. This allows you to create different effects, such as acceleration, deceleration, or custom transition curves.

Predefined Timing Functions

There are many predefined values for

animation-timing-function

that can be used to achieve different effects.

Linear

The animation has a constant pace from beginning to end.

1.animation-linear {
2  animation-timing-function: linear;
3}

Ease

The animation starts slowly, speeds up in the middle, and then slows down at the end.

1.animation-ease {
2  animation-timing-function: ease;
3}

Ease-in

The animation starts slowly and then speeds up.

1.animation-ease-in {
2  animation-timing-function: ease-in;
3}

Ease-out

The animation starts fast and then slows down.

1.animation-ease-out {
2  animation-timing-function: ease-out;
3}

Ease-in-out

The animation starts slowly, speeds up in the middle, and then slows down again.

1.animation-ease-in-out {
2  animation-timing-function: ease-in-out;
3}

Custom Bezier Curves

For more advanced effects, you can define your own Bezier curve using the

cubic-bezier

function.

1.animation-custom {
2  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
3}

These four values represent the Bezier curve parameters that control the shape of the transition function.

Example Animations Using animation-timing-function

Example 1: Animation with Constant Pace (Linear)

1@keyframes slide {
2  0% { left: 0; }
3  100% { left: 100px; }
4}
5
6.linear-animation {
7  position: relative;
8  animation: slide 2s linear infinite;
9}

Example 2: Animation with Ease Curve

1@keyframes ease-slide {
2  0% { left: 0; }
3  100% { left: 100px; }
4}
5
6.ease-animation {
7  position: relative;
8  animation: ease-slide 2s ease infinite;
9}

Example 3: Custom Bezier Curve

1@keyframes custom-slide {
2  0% { left: 0; }
3  100% { left: 100px; }
4}
5
6.custom-animation {
7  position: relative;
8  animation: custom-slide 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
9}

HTML for Examples

To test these animations, create an HTML file and add the appropriate elements with assigned classes:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>CSS Animations</title>
7  <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10  <div class="linear-animation">Linear Animation</div>
11  <div class="ease-animation">Ease Animation</div>
12  <div class="custom-animation">Custom Bezier Animation</div>
13</body>
14</html>

Task: Create an Animation Using Different Timing Functions

Your task is to create an animation for three different elements. Each element should use a different

animation-timing-function

Linear Animation: The element should move horizontally at a constant pace.
Ease-in-out Animation: The element should move horizontally, starting slowly, speeding up in the middle, and slowing down at the end.
Animation with Custom Bezier Curve: The element should move horizontally using a custom Bezier curve.

Steps to Complete:

Create an HTML file and add three elements that will be animated.
Define
```
@keyframes
```
for an animation that moves elements horizontally.
Apply the appropriate
```
animation-timing-function
```
properties to each element.
Add styles to a CSS file and load it in the HTML file.

Example:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>CSS Animations</title>
7  <style>
8    @keyframes slide {
9      0% { left: 0; }
10      100% { left: 100px; }
11    }
12
13    .animation-container {
14      position: relative;
15      width: 100px;
16      height: 50px;
17      margin: 20px;
18      background-color: lightblue;
19    }
20
21    .linear-animation {
22      animation: slide 2s linear infinite;
23    }
24
25    .ease-in-out-animation {
26      animation: slide 2s ease-in-out infinite;
27    }
28
29    .custom-animation {
30      animation: slide 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
31    }
32  </style>
33</head>
34<body>
35  <div class="animation-container linear-animation">Linear</div>
36  <div class="animation-container ease-in-out-animation">Ease-in-out</div>
37  <div class="animation-container custom-animation">Custom</div>
38</body>
39</html>

Thanks to the

animation-timing-function

property, you have full control over the animation's pace, allowing you to create more advanced and interesting visual effects on web pages.

As Mohamed says: "Animation tempo is like the tempo of building a pyramid - too fast and everything falls apart, too slow and nobody will see the result. Find the perfect balance with

animation-timing-function

Try different timing functions in the editor below:

Go to CodeWorlds→