Home / Topic / Animations in CSS / Introduction to Animations with Keyframes

Animations in CSS

Introduction to Animations with Keyframes

Animations with keyframes in CSS allow for more complex and detailed changes in the styles of elements over time. Using @keyframes, you can define a series of intermediate states and specify how an element's properties should be animated.

What are Keyframes?

Keyframes are like markers that define specific points in the duration of an animation where a particular style should be applied. Using @keyframes, you can specify which styles should be applied at various points throughout the duration of the animation.

Syntax of @keyframes

The @keyframes rule is used to define the structure of an animation. Here is the basic syntax:

css
9
1
2
3
4
5
6
7
8
›
⌄
⌄
⌄
@keyframes animation-name {
    from {
        /* initial styles */
    }
    to {
        /* final styles */
    }
}

You can use percentages to define multiple intermediate points:

css
99
1
2
3
4
5
6
7
8
9
10
11
›
⌄
⌄
⌄
⌄
@keyframes animation-name {
    0% {
        /* initial state */
    }
    50% {
        /* intermediate state */
    }
    100% {
        /* final state */
    }
}

Applying Animations with Keyframes

Once keyframes are defined, they are applied to the element using the animation property.

Main Animation Properties

animation-name: The name of the animation defined by @keyframes.
```
css
9
1
›
animation-name: animation-name;
```
animation-duration: The duration of the animation.
```
css
9
1
›
animation-duration: 2s;
```
animation-timing-function: The timing function of the animation.
```
css
9
1
›
animation-timing-function: ease-in-out;
```
animation-delay: Defines the delay before the animation starts.
```
css
9
1
›
animation-delay: 1s;
```
animation-iteration-count: The number of times the animation should repeat.
```
css
9
1
›
animation-iteration-count: infinite;
```
animation-direction: Defines the direction of the animation.
```
css
9
1
›
animation-direction: alternate;
```

Basic Example

Let's see a basic example where a box changes color and moves to the right:

html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
›
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation with Keyframes</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            animation: moveRight 2s infinite;
        }

        @keyframes moveRight {
            0% {
                background-color: #3498db;
                transform: translateX(0);
            }
            100% {
                background-color: #e74c3c;
                transform: translateX(100px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

In this example, the div box performs the moveRight animation, changing the background color from blue to red and moving the box 100 pixels to the right in 2 seconds.

Advanced Example with Multiple Keyframes

Here is a more advanced example that uses multiple keyframes to change several properties:

html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Complex Animation with Keyframes</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            animation: complexAnimation 4s infinite;
        }

        @keyframes complexAnimation {
            0% {
                background-color: #3498db;
                transform: translateX(0) scale(1) rotate(0deg);
            }
            25% {
                background-color: #9b59b6;
                transform: translateX(100px) scale(1.5) rotate(45deg);
            }
            50% {
                background-color: #e74c3c;
                transform: translateX(200px) scale(1) rotate(90deg);
            }
            75% {
                background-color: #f1c40f;
                transform: translateX(100px) scale(0.5) rotate(135deg);
            }
            100% {
                background-color: #3498db;
                transform: translateX(0) scale(1) rotate(180deg);
            }
        }
    </style>

In this example, the complexAnimation performs a series of transformations and color changes over 4 seconds.

[Placeholder for image: Visual example showing a box changing color, moving, and rotating in various stages, illustrating the use of keyframes]

Best Practices

Use Descriptive Names: Ensure your animation names are clear and descriptive.
Keep Smoothness: Ensure transitions between keyframes are smooth to avoid abrupt effects.
Don't Overload: Avoid piling too many changes into a single animation to maintain clarity and efficiency.

With this basic knowledge of keyframe animations, you are ready to create more complex and detailed animations in your projects. In the next section, we will explore the detailed syntax of @keyframes to leverage its full potential.

Back to previous chapter

Mark as read and continue

Support Chuck’s Academy!

Enjoying this course? I put a lot of effort into making programming education free and accessible. If you found this helpful, consider buying me a coffee to support future lessons. Every contribution helps keep this academy running! ☕🚀

Chat with Chuck

Chat with Chuck AI