We use cookies to enhance your experience on the site

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.

Go to CodeWorlds→