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:

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

Steps to Complete:

1. Create an HTML file and add three elements that will be animated.
2. Define @keyframes for an animation that moves elements horizontally.
3. Apply the appropriate animation-timing-function properties to each element.
4. 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:

1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7body {
8  font-family: 'Segoe UI', sans-serif;
9  background: linear-gradient(180deg, #1a0a2e, #2d1b4e);
10  color: white;
11  min-height: 100vh;
12  display: flex;
13  justify-content: center;
14  align-items: center;
15}
16
17.scene {
18  text-align: center;
19  width: 100%;
20  max-width: 600px;
21  padding: 20px;
22}
23
24h2 {
25  margin-bottom: 30px;
26  color: #f0c040;
27}
28
29.river {
30  background: linear-gradient(180deg, #1565c0, #0d47a1);
31  height: 120px;
32  border-radius: 10px;
33  display: flex;
34  align-items: center;
35  overflow: hidden;
36  position: relative;
37}
38
39.boat {
40  font-size: 24px;
41  background: #8d6e2e;
42  color: white;
43  padding: 10px 20px;
44  border-radius: 8px;
45  position: relative;
46  white-space: nowrap;
47  /* Add animation here */
48  /* Use @keyframes sail with translateX */
49  /* animation: sail 8s linear infinite alternate; */
50}
51
52/* Define @keyframes sail */
53/* 0% { transform: translateX(-100px); } */
54/* 100% { transform: translateX(400px); } */
55
56.hint {
57  margin-top: 20px;
58  color: #aaa;
59  font-style: italic;
60}