CSS Animations with @keyframes

CSS animations provide the ability to add movement and interaction to web pages without the need to use JavaScript. Using the @keyframes rule, we can define animations that progress through different stages, giving full control over how elements move, scale, rotate, and much more.

Defining Animations with @keyframes

Using @keyframes allows you to create a named animation consisting of different steps, specified as percentages from 0% to 100%.

Example:

1@keyframes slide {
2  0% { left: 0; }
3  50% { left: 50px; }
4  100% { left: 100px; }
5}

In this example, the animation named "slide" moves an element horizontally from the starting position to 100 pixels to the right.

Applying Animations to Elements

After defining an animation with @keyframes, you can apply it to any element using the animation property.

Example:

1div {
2  animation: slide 2s linear infinite;
3}

In this example:

• slide: The animation name defined with @keyframes.
• 2s: The duration of the animation.
• linear: The transition between steps (in this case, the transition is even).
• infinite: The animation will repeat indefinitely.

Advanced Techniques

Setting Control Points

You can define any number of control points in an animation, not just the beginning, middle, and end.

Example:

1@keyframes bounce {
2  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
3  40% { transform: translateY(-30px); }
4  60% { transform: translateY(-15px); }
5}

Animating Multiple Properties

At each stage of the animation, you can manipulate multiple CSS properties at once.

Example:

1@keyframes grow-spin {
2  0% { transform: scale(1) rotate(0); }
3  50% { transform: scale(1.5) rotate(180deg); }
4  100% { transform: scale(1) rotate(360deg); }
5}

CSS animations with @keyframes offer a powerful tool for creating smooth, responsive animations without the need for scripts. Thanks to the wide range of customization and control options, they are an ideal solution for developers and designers who want to add life and interaction to their websites.

CSS Animation with animation-delay: An Ancient Egypt-Themed Example

Sometimes we want an animation not to start immediately but with a certain delay. The animation-delay property in CSS allows you to set such a delay. To illustrate this feature, we'll create an animation that evokes images of Ancient Egypt.

Task: Creating an Ancient Egypt Animation

Goal

Creating three animations inspired by Ancient Egypt that will use different CSS properties, including @keyframes, animation, and animation-delay.

Steps to complete:

1. HTML Structure

Create a new HTML file with a basic document structure. Add three div elements that will represent a pyramid, a scarab, and the Eye of Horus.

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  <link rel="stylesheet" href="styles.css">
7  <title>Egyptian Animation</title>
8</head>
9<body>
10  <div class="pyramid"></div>
11  <div class="scarab"></div>
12  <div class="eye"></div>
13</body>
14</html>

2. Styling and Animations in CSS

Add styling and animations in the styles.css file. Make sure the CSS file is properly linked to the HTML file.

1body {
2  display: flex;
3  justify-content: space-around;
4  align-items: center;
5  height: 100vh;
6  background-color: #f0e68c;
7}
8
9.pyramid, .scarab, .eye {
10  width: 100px;
11  height: 100px;
12  background-color: #c0c0c0;
13  position: relative;
14}
15
16/* Animation for the pyramid */
17@keyframes pyramid-slide {
18  0% { left: 0; }
19  50% { left: 50px; }
20  100% { left: 100px; }
21}
22
23.pyramid {
24  animation: pyramid-slide 4s linear infinite;
25}
26
27/* Animation for the scarab */
28@keyframes scarab-bounce {
29  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
30  40% { transform: translateY(-30px); }
31  60% { transform: translateY(-15px); }
32}
33
34.scarab {
35  animation: scarab-bounce 2s ease infinite;
36}
37
38/* Animation for the Eye of Horus */
39@keyframes eye-grow-spin {
40  0% { transform: scale(1) rotate(0); }
41  50% { transform: scale(1.5) rotate(180deg); }
42  100% { transform: scale(1) rotate(360deg); }
43}
44
45.eye {
46  animation: eye-grow-spin 3s ease-in-out infinite;
47}

3. Setting Animation Delay

Add the animation-delay property so that the animations start with a delay.

1.pyramid {
2  animation: pyramid-slide 4s linear infinite;
3  animation-delay: 1s;
4}
5
6.scarab {
7  animation: scarab-bounce 2s ease infinite;
8  animation-delay: 2s;
9}
10
11.eye {
12  animation: eye-grow-spin 3s ease-in-out infinite;
13  animation-delay: 3s;
14}

Summary

You've created three different animations inspired by Ancient Egypt, using the @keyframes, animation, and animation-delay properties in CSS. Analyze how each of these animations works and how they can be adapted to different design needs.

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 @keyframes - Animation Basics</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>CSS @keyframes - Animations in CSS</h1>
12
13        <section class="demo-section">
14            <h2>Basic @keyframes</h2>
15            <div class="animation-demo">
16                <div class="box slide">
17                    <span>Slide Animation</span>
18                </div>
19                <div class="box bounce">
20                    <span>Bounce Animation</span>
21                </div>
22                <div class="box grow-spin">
23                    <span>Grow & Spin</span>
24                </div>
25            </div>
26        </section>
27
28        <section class="demo-section">
29            <h2>Animation Delay</h2>
30            <div class="delay-demo">
31                <div class="pyramid">Pyramid</div>
32                <div class="scarab">Scarab</div>
33                <div class="eye">Eye of Horus</div>
34            </div>
35            <p class="help-text">Animations start with different delays</p>
36        </section>
37
38        <section class="demo-section">
39            <h2>Animation Direction</h2>
40            <div class="direction-demo">
41                <div class="direction-box normal">Normal</div>
42                <div class="direction-box reverse">Reverse</div>
43                <div class="direction-box alternate">Alternate</div>
44                <div class="direction-box alternate-reverse">Alt-Reverse</div>
45            </div>
46        </section>
47
48        <section class="demo-section">
49            <h2>Animation Timing Functions</h2>
50            <div class="timing-demo">
51                <div class="timing-box linear">Linear</div>
52                <div class="timing-box ease">Ease</div>
53                <div class="timing-box ease-in">Ease-in</div>
54                <div class="timing-box ease-out">Ease-out</div>
55                <div class="timing-box ease-in-out">Ease-in-out</div>
56                <div class="timing-box cubic-bezier">Cubic-bezier</div>
57            </div>
58        </section>
59
60        <section class="demo-section">
61            <h2>Animation Iteration Count</h2>
62            <div class="iteration-demo">
63                <div class="iter-box once">1 time</div>
64                <div class="iter-box three-times">3 times</div>
65                <div class="iter-box infinite">Infinite</div>
66            </div>
67        </section>
68
69        <section class="demo-section">
70            <h2>Complex Multi-Property Animations</h2>
71            <div class="complex-demo">
72                <div class="complex-box rainbow">
73                    <span>Rainbow Transform</span>
74                </div>
75                <div class="complex-box floating">
76                    <span>Floating Element</span>
77                </div>
78                <div class="complex-box pulsing">
79                    <span>Pulsing Heart</span>
80                </div>
81            </div>
82        </section>
83
84        <section class="demo-section">
85            <h2>Egyptian Animations - Theme Demo</h2>
86            <div class="egyptian-demo">
87                <div class="solar-barge">Solar Barge</div>
88                <div class="hieroglyph">𓂀</div>
89                <div class="sphinx">Sphinx</div>
90            </div>
91        </section>
92    </div>
93</body>
94</html>