CSS Animation: The Pharaoh's Solar Barge

In Ancient Egypt, the solar barge was a symbol of the sun god Ra's journey across the sky. Let's imagine we want to animate such a barge, moving it across the screen, but we want it to start moving after a certain delay.

Step 1: Defining @keyframes

First, we'll define an animation that moves the barge horizontally:

1@keyframes sail {
2  0% { left: 0; }
3  100% { left: 100%; }
4}

Step 2: Applying the Animation with

animation-delay

Now we'll apply this animation to an 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, meaning it will remain stationary for the first 3 seconds, and then start moving according to the defined @keyframes.

HTML for the Barge

Your HTML might look like this to represent the barge:

1<div class="solar-barge">
2  <img src="solar-barge.png" alt="Pharaoh's Solar Barge">
3</div>

Summary

The

animation-delay

property in CSS is a useful tool for adding delay to animations, allowing for more complex and sophisticated effects. The Pharaoh's Solar Barge example shows how this technique can be used to create interesting and themed animations.