Main Task: Animated Pharaoh's Temple

Welcome to the final project of the animations module! As Mohamed says: "A true master of CSS animation can bring even the stone walls of a temple to life." In this task, you'll create a comprehensive animated web page, combining all the techniques you've learned in this module: @keyframes, animation-iteration-count, animation-direction, animation-delay, animation-timing-function, and animation shorthand properties.

Imagine you're creating an interactive presentation of a virtual tour of an Egyptian temple. Every element on the page should "come alive" thanks to animations - the header should appear with an effect, images should enter with a delay, and buttons should respond to user interaction.

Task Goals

1. Creating an animation for the page header.
2. Animating an image that appears after some time.
3. Animating buttons that change color on hover.
4. Creating an animation for a text section that moves up and down.
5. Creating an animation for list items that appear one after another.

Step 1: HTML Structure

First, create an HTML file with the following structure:

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  <header class="main-header">
11    <h1>Welcome to the World of CSS Animations</h1>
12  </header>
13  <section class="image-section">
14    <img src="image.jpg" alt="Beautiful view" class="animated-image">
15  </section>
16  <section class="buttons-section">
17    <button class="animated-button">Button 1</button>
18    <button class="animated-button">Button 2</button>
19    <button class="animated-button">Button 3</button>
20  </section>
21  <section class="text-section">
22    <p class="animated-text">This is sample text that will move up and down.</p>
23  </section>
24  <section class="list-section">
25    <ul>
26      <li class="animated-list-item">List item 1</li>
27      <li class="animated-list-item">List item 2</li>
28      <li class="animated-list-item">List item 3</li>
29    </ul>
30  </section>
31</body>
32</html>

Step 2: CSS Styles

Now create a CSS file and add the following styles and animations:

1/* Basic styles */
2body {
3  font-family: Arial, sans-serif;
4  margin: 0;
5  padding: 0;
6  background-color: #f0f0f0;
7}
8
9.main-header {
10  background-color: #333;
11  color: #fff;
12  padding: 20px;
13  text-align: center;
14}
15
16.image-section {
17  text-align: center;
18  margin: 20px 0;
19}
20
21.buttons-section {
22  text-align: center;
23  margin: 20px 0;
24}
25
26.text-section {
27  text-align: center;
28  margin: 20px 0;
29}
30
31.list-section {
32  text-align: center;
33  margin: 20px 0;
34}
35
36.animated-image {
37  width: 300px;
38  opacity: 0;
39  animation: fadeIn 3s 1s forwards;
40}
41
42.animated-button {
43  margin: 0 10px;
44  padding: 10px 20px;
45  background-color: #008cba;
46  color: white;
47  border: none;
48  cursor: pointer;
49  transition: background-color 0.3s;
50}
51
52.animated-button:hover {
53  background-color: #005f5f;
54}
55
56.animated-text {
57  font-size: 18px;
58  animation: moveText 5s infinite alternate;
59}
60
61.animated-list-item {
62  opacity: 0;
63  animation: fadeInUp 1s ease-in-out forwards;
64}
65
66.animated-list-item:nth-child(1) {
67  animation-delay: 0.5s;
68}
69
70.animated-list-item:nth-child(2) {
71  animation-delay: 1s;
72}
73
74.animated-list-item:nth-child(3) {
75  animation-delay: 1.5s;
76}
77
78/* Animation definitions */
79@keyframes fadeIn {
80  0% {
81    opacity: 0;
82  }
83  100% {
84    opacity: 1;
85  }
86}
87
88@keyframes moveText {
89
90  0% {
91    transform: translateY(0);
92  }
93  100% {
94    transform: translateY(-20px);
95  }
96}
97
98@keyframes fadeInUp {
99  0% {
100    opacity: 0;
101    transform: translateY(20px);
102  }
103  100% {
104    opacity: 1;
105    transform: translateY(0);
106  }
107}

Step 3: Testing

Open the HTML file in a browser to see the animation effects. Make sure all animations work as expected.

Task

1. Header Animation: Add an animation to the page header (.main-header) that changes the background color every 5 seconds, using @keyframes and animation.
2. Image Animation: Create an animation for the image (.animated-image) that appears with a slide-left effect, with a 2-second delay.
3. Button Animation: Modify the buttons (.animated-button) so that on click they animate by changing color to red and increasing font size.
4. Text Animation: Add another animation to the text (.animated-text) that changes its color every 3 seconds.
5. List Animation: Add an animation to the list items (.animated-list-item) that causes elements to appear with an upward slide and rotation effect.

Use all the presented techniques to add advanced animation effects to the web page.

Summary of learned properties

In this module, you've learned the following CSS animation properties:

• @keyframes - defining animation stages (like successive scenes in the story of Ra's journey)
• animation-name - assigning an animation to an element
• animation-duration - duration of one animation cycle
• animation-timing-function - pace control (linear, ease, ease-in, ease-out, cubic-bezier)
• animation-delay - delay before starting the animation
• animation-iteration-count - number of repetitions (numeric value or infinite)
• animation-direction - animation direction (normal, reverse, alternate, alternate-reverse)
• animation-fill-mode - element state before and after animation (forwards, backwards, both)
• animation shorthand - all properties in one line

Each of these properties is like a different attribute of a priest's ritual - together they create a complete, magical ceremony of animation!

Try your skills 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, #0a3d62, #1e8449);
10  min-height: 100vh;
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  color: white;
15}
16
17.scene {
18  text-align: center;
19  padding: 20px;
20}
21
22h2 {
23  margin-bottom: 30px;
24  color: #a9dfbf;
25}
26
27.water {
28  width: 250px;
29  height: 250px;
30  margin: 0 auto;
31  background: radial-gradient(circle, rgba(30, 132, 73, 0.3), rgba(10, 61, 98, 0.5));
32  border-radius: 50%;
33  display: flex;
34  align-items: center;
35  justify-content: center;
36  border: 2px solid rgba(169, 223, 191, 0.3);
37}
38
39.lotus {
40  font-size: 80px;
41  /* Add the bloom animation here */
42  /* animation: bloom 5s ease-in-out infinite; */
43}
44
45/* Define @keyframes bloom */
46/* @keyframes bloom { */
47/*   0% { transform: scale(0.3) rotate(-30deg); opacity: 0.2; } */
48/*   50% { transform: scale(1.2) rotate(15deg); opacity: 1; } */
49/*   100% { transform: scale(1) rotate(0deg); opacity: 0.8; } */
50/* } */
51
52.hint {
53  margin-top: 30px;
54  color: #aaa;
55  font-style: italic;
56}