HTML and CSS course · Module 6: CSS Animations
CSS Animation: The Pharaoh's Solar Barge
In this lesson4
In ancient Egypt, the solar barge was a symbol of the journey of the sun god Ra across the sky. Let's imagine that we want to animate such a barge moving across the screen, but it should set sail only when the priests finish their hymn, a few seconds after the page loads. An animation that starts right away would spoil the ceremony. For situations like this, CSS has the animation-delay property.
Step 1: Defining @keyframes
First, we will define an animation that moves the barge horizontally. The 0% frame is the starting point, and 100% is the end of the voyage:
1@keyframes sail {
2 0% { left: 0; }
3 100% { left: 100%; }
4}The left property only works on positioned elements, which is why the barge will get position: absolute in a moment. The value left: 100% moves its left edge to the right edge of the container, so the barge sails off beyond the horizon.
Step 2: Applying the Animation with animation-delay
Now we will apply this animation to the element representing the barge, adding a 3-second delay:
1.solar-barge {
2 position: absolute;
3 animation: sail 10s linear infinite;
4 animation-delay: 3s; /* 3-second delay */
5}The element with the solar-barge class will now be animated with a 3-second delay, which means it will stay still for the first 3 seconds and then start moving according to the defined @keyframes. The linear value gives a constant speed, with no acceleration or braking, and infinite repeats the voyage forever. The order of the declarations matters here: the animation shorthand sets the delay to 0, so animation-delay has to come after it, otherwise the shorthand would override it.
Delay in the shorthand
You can write the same thing in a single declaration. In the animation shorthand, the first time value is always the duration, and the second one is the delay:
1.solar-barge {
2 position: absolute;
3 animation: sail 10s linear 3s infinite;
4}The effect is identical to step 2, and the code is shorter. animation: slide 2s ease 0.5s infinite works the same way, for example: two seconds of movement and half a second of waiting for the start.
What happens during the delay
The delay works only once, before the first cycle. With infinite, the following voyages start right away, without waiting again. During the delay, the barge has its normal styles, not those from the 0% frame, so it may stand somewhere other than the start of the animation. animation-fill-mode: backwards helps with that, and you will meet it in the lesson on animation shorthands. The delay can also be negative: -5s on a ten-second voyage makes the barge start immediately, from halfway along the route.
A fleet of barges
The delay shows its real power with several elements. Three barges with the same animation and delays of 0s, 1s and 2s will sail out one after another, like a fleet in a procession, even though they all use the same @keyframes. You do not need three animations, one animation and three different delays are enough.
HTML for the Barge
Your HTML could look like this to represent the barge. Remember the description in the alt attribute:
1<div class="solar-barge">
2 <img src="solar-barge.png" alt="Pharaoh's Solar Barge">
3</div>The barge container carries the image, so the animation moves both at once, and the image file itself does not change.
Summary
The animation-delay property in CSS is a useful tool for adding a delay to animations, which allows for more complex and sophisticated effects. The example of the Pharaoh's Solar Barge shows how this technique can be used to create interesting, themed animations. Every animation built with @keyframes works the same way, for example a spinning hieroglyph going from rotate(0deg) to rotate(360deg) with animation: spin 3s linear infinite. My advice: to move elements, choose transform: translateX() instead of left, because then the browser does not have to recalculate the page layout in every frame. In the main project, delays will build a sequence in which cards appear one after another.
In the editor below, a showcase of advanced animations is waiting. Focus on two sections: in Animation Shorthand the delay sits inside the shorthand, and in Chained Animations the phases start one after another thanks to animation-delay.
Code for this lesson: index.html
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>Advanced CSS Animations</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <div class="container">
11 <h1>Advanced CSS Animations</h1>
12
13 <section class="demo-section">
14 <h2>Animation Shorthand Property</h2>
15 <div class="shorthand-demo">
16 <div class="shorthand-box example1">
17 <span>slide 3s ease-in 1s 2 alternate both</span>
18 </div>
19 <div class="shorthand-box example2">
20 <span>bounce 2s linear infinite</span>
21 </div>
22 <div class="shorthand-box example3">
23 <span>rotate 1.5s ease-out 0.5s forwards</span>
24 </div>
25 </div>
26 </section>
27
28 <section class="demo-section">
29 <h2>Animation Fill Mode</h2>
30 <div class="fill-mode-demo">
31 <div class="fill-box none">none</div>
32 <div class="fill-box forwards">forwards</div>
33 <div class="fill-box backwards">backwards</div>
34 <div class="fill-box both">both</div>
35 </div>
36 <p class="help-text">Click anywhere to restart animations</p>
37 </section>
38
39 <section class="demo-section">
40 <h2>Animation Play State</h2>
41 <div class="play-state-demo">
42 <div class="play-box running">
43 <span>running</span>
44 </div>
45 <div class="play-box paused">
46 <span>paused (hover to play)</span>
47 </div>
48 </div>
49 </section>
50
51 <section class="demo-section">
52 <h2>Chained Animations (Sequential)</h2>
53 <div class="chain-demo">
54 <div class="chain-element phase1">Phase 1</div>
55 <div class="chain-element phase2">Phase 2</div>
56 <div class="chain-element phase3">Phase 3</div>
57 <div class="chain-element phase4">Phase 4</div>
58 </div>
59 </section>
60
61 <section class="demo-section">
62 <h2>Multiple Animations (Parallel)</h2>
63 <div class="multiple-demo">
64 <div class="multi-box">
65 <span>Spin + Bounce + Color</span>
66 </div>
67 </div>
68 </section>
69
70 <section class="demo-section">
71 <h2>Responsive Animations</h2>
72 <div class="responsive-demo">
73 <div class="responsive-card">
74 <h3>Responsive Card</h3>
75 <p>Animation adapts to the screen size</p>
76 </div>
77 </div>
78 </section>
79
80 <section class="demo-section">
81 <h2>CSS-only Loading Animations</h2>
82 <div class="loading-demo">
83 <div class="loader spinner">
84 <div class="spinner-blade"></div>
85 <div class="spinner-blade"></div>
86 <div class="spinner-blade"></div>
87 <div class="spinner-blade"></div>
88 </div>
89
90 <div class="loader dots">
91 <div class="dot"></div>
92 <div class="dot"></div>
93 <div class="dot"></div>
94 </div>
95
96 <div class="loader progress">
97 <div class="progress-bar"></div>
98 </div>
99
100 <div class="loader pulse">
101 <div class="pulse-ring"></div>
102 <div class="pulse-ring"></div>
103 <div class="pulse-ring"></div>
104 </div>
105 </div>
106 </section>
107
108 <section class="demo-section">
109 <h2>3D Animations</h2>
110 <div class="threed-demo">
111 <div class="cube-3d">
112 <div class="face front">Front</div>
113 <div class="face back">Back</div>
114 <div class="face right">Right</div>
115 <div class="face left">Left</div>
116 <div class="face top">Top</div>
117 <div class="face bottom">Bottom</div>
118 </div>
119
120 <div class="flipcard">
121 <div class="flipcard-inner">
122 <div class="flipcard-front">
123 <h4>Hover me!</h4>
124 </div>
125 <div class="flipcard-back">
126 <h4>Back side!</h4>
127 </div>
128 </div>
129 </div>
130 </div>
131 </section>
132 </div>
133
134 <script>
135 // Restart animations on click
136 document.addEventListener('click', function() {
137 const fillBoxes = document.querySelectorAll('.fill-box');
138 fillBoxes.forEach(box => {
139 box.style.animation = 'none';
140 box.offsetHeight; // trigger reflow
141 box.style.animation = null;
142 });
143 });
144 </script>
145</body>
146</html>Remember: animation-delay is the priest who gives the barge the signal to sail only when the last note of the hymn to Ra has faded away.
Spotted a mistake in this lesson?
Check yourself
Answer the questions from this lesson. Pick an answer to see right away whether it is correct.
1. What is the purpose of the animation-delay property?
Hands-on tasks in the game
- Code editor
Create @keyframes spin: from rotate(0deg) to rotate(360deg). Apply to .hieroglyph: animation: spin 3s linear infinite. The hieroglyph will spin smoothly like a waterwheel on the Nile!
- Horizontal ordering
Arrange the animation declaration with delay in the correct order