Advanced CSS Animations with @keyframes

In Ancient Egypt, priests performing rituals repeated them a specific number of times - sometimes three times, sometimes seven times, and sometimes infinitely many times to ensure divine protection. Similarly in CSS, animations can be controlled using various properties, including animation-iteration-count, which specifies how many times an animation should repeat, and animation-direction, which specifies the direction of the animation. Below we present several practical examples using these properties.

Imagine you're creating an animation depicting the solar barge of Ra traveling across the sky. The barge must repeat its route daily - in the morning it sets out from the east, in the evening it reaches the west, and then returns underground so it can appear again in the morning. This is a perfect analogy for the properties we'll learn today.

animation-iteration-count

The animation-iteration-count property lets you specify how many times an animation should repeat.

Example 1: Bouncing Ball

We want the ball to bounce 3 times.

CSS

1@keyframes bounce {
2  0%, 100% { transform: translateY(0); }
3  50% { transform: translateY(-30px); }
4}
5
6.bouncing-ball {
7  animation: bounce 1s ease-in-out;
8  animation-iteration-count: 3; /* The ball will bounce 3 times */
9}

Example 2: Infinite Rotation

We want an element to rotate infinitely.

CSS

1@keyframes spin {
2  0% { transform: rotate(0deg); }
3  100% { transform: rotate(360deg); }
4}
5
6.infinite-spin {
7  animation: spin 2s linear infinite;
8  animation-iteration-count: infinite; /* Infinite rotation */
9}

animation-direction

The animation-direction property specifies the direction of the animation. You can set different values to achieve different effects:

• normal (default) - animation from beginning to end.
• reverse - animation from end to beginning.
• alternate - animation alternates from beginning to end, then from end to beginning.
• alternate-reverse - animation alternates from end to beginning, then from beginning to end.

Example 3: Alternating Blinking

We want an element to change color alternately.

CSS

1@keyframes blink {
2  0%, 100% { background-color: red; }
3  50% { background-color: blue; }
4}
5
6.alternate-blink {
7  animation: blink 1s linear infinite;
8  animation-direction: alternate; /* Change animation direction */
9}

Advanced Techniques

Combining Properties

We can combine different animation properties to create more complex effects.

Example 4: Bouncing and Spinning Ball

We want the ball to bounce and spin simultaneously, alternating from beginning to end and from end to beginning.

CSS

1@keyframes bounce-spin {
2  0%, 100% { transform: translateY(0) rotate(0deg); }
3  50% { transform: translateY(-30px) rotate(180deg); }
4}
5
6.bouncing-spinning-ball {
7  animation: bounce-spin 2s ease-in-out infinite;
8  animation-direction: alternate; /* Bouncing and spinning alternately */
9}

HTML for Examples

To test these animations, create an HTML file and add the appropriate elements with assigned classes:

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  <div class="bouncing-ball">Bouncing Ball</div>
11  <div class="infinite-spin">Infinite Rotation</div>
12  <div class="alternate-blink">Blinking Elements</div>
13  <div class="bouncing-spinning-ball">Bouncing-Spinning Ball</div>
14</body>
15</html>

Summary

The animation-iteration-count and animation-direction properties in CSS enable creating advanced animations that can be repeated multiple times and change direction. Combined with @keyframes, these properties allow for full control over the appearance and behavior of elements on the page, opening the door to creating more interactive and visually attractive designs.

As Mohamed says: "Every animation, like a pharaoh's ritual, has its rhythm and direction. Master them, and your pages will come alive like the paintings in the Temple of Karnak!"

Try these properties 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, #ff9a56, #d4763a);
10  color: white;
11  min-height: 100vh;
12  display: flex;
13  justify-content: center;
14  align-items: center;
15}
16
17.scene {
18  text-align: center;
19  padding: 20px;
20}
21
22h2 {
23  margin-bottom: 30px;
24  color: #3d2914;
25}
26
27.desert {
28  position: relative;
29  width: 300px;
30  height: 250px;
31  margin: 0 auto;
32}
33
34.pyramid {
35  font-size: 120px;
36  color: #c9a84c;
37  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
38  position: absolute;
39  top: 20px;
40  left: 50%;
41  transform: translateX(-50%);
42  /* Add animation here */
43  /* Use @keyframes appear with opacity and scale */
44  /* animation: appear 3s ease-out forwards; */
45}
46
47.sand {
48  position: absolute;
49  bottom: 0;
50  width: 100%;
51  height: 60px;
52  background: linear-gradient(180deg, #d4a574, #c9a84c);
53  border-radius: 50% 50% 0 0;
54}
55
56/* Define @keyframes appear */
57/* 0% { opacity: 0; transform: translateX(-50%) scale(0.3); } */
58/* 100% { opacity: 1; transform: translateX(-50%) scale(1); } */
59
60.hint {
61  margin-top: 20px;
62  color: #3d2914;
63  font-style: italic;
64}