Create CSS3 Animations with Keyframes

Introduction

In this lab, students will dive into the world of CSS3 animations by mastering the powerful @keyframes rule and animation techniques. The course provides a comprehensive exploration of creating dynamic web animations, focusing on understanding keyframe syntax, defining animation properties, and implementing advanced animation effects without relying on JavaScript.

Participants will learn to craft smooth, complex animations by defining animation stages using percentage-based keyframes and transform properties. Through practical examples and hands-on exercises, students will discover how to move, resize, and color elements dynamically, gaining the skills to create engaging and interactive web experiences using pure CSS3 animation techniques.

Understand CSS3 Animation Keyframes Syntax

In this step, you'll learn the fundamental syntax of CSS3 animation keyframes, which are the building blocks for creating dynamic web animations. CSS animations allow you to smoothly transform elements from one style to another without using JavaScript.

Let's start by understanding the basic syntax of CSS keyframes. Open the WebIDE and create a new file called styles.css in the ~/project directory.

CSS keyframe animations are defined using the @keyframes rule, which specifies the animation's behavior at different stages of the animation sequence. Here's a simple example to demonstrate the syntax:

@keyframes moveRight {
  /* Starting state (0% or "from") */
  from {
    transform: translateX(0);
  }

  /* Ending state (100% or "to") */
  to {
    transform: translateX(300px);
  }
}

In this example, moveRight is the animation name, and it defines how an element will move from its original position to 300 pixels to the right.

You can also use percentage-based keyframes for more complex animations:

@keyframes colorChange {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: blue;
  }
}

This animation demonstrates how you can specify multiple stages of an animation using percentage values, allowing for more intricate and dynamic effects.

Key points to remember about keyframe syntax:

Use @keyframes followed by a unique animation name
Define states using from/to or percentage values
Specify CSS properties to animate at each stage

Example output of a simple animation:

[A div element smoothly moving from left to right]
[A div element changing colors from red to green to blue]

Define Basic Animation Using @keyframes Rule

In this step, you'll learn how to create a basic animation using the @keyframes rule by building a simple moving element animation. We'll expand on the previous step's knowledge and create a more practical example.

First, let's create an HTML file to demonstrate our animation. Open the WebIDE and create a new file called index.html in the ~/project directory:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic CSS Animation</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="animated-box"></div>
  </body>
</html>

Now, update the styles.css file we created earlier with a more detailed animation:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
}

@keyframes moveAndResize {
  0% {
    /* Starting state */
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  50% {
    /* Midpoint of animation */
    transform: translateX(200px) scale(1.5);
    background-color: green;
  }

  100% {
    /* Ending state */
    transform: translateX(400px) scale(1);
    background-color: red;
  }
}

Let's break down the @keyframes rule:

We define an animation called moveAndResize
At 0% (start), the box is at its original position
At 50% (midpoint), the box moves 200px right and increases in size
At 100% (end), the box moves 400px right and returns to original size

Example output:

[A blue box that:
 - Moves from left to right
 - Changes size from normal to larger and back
 - Changes color from blue to green to red]

This example demonstrates how to:

Create a multi-stage animation
Use percentage-based keyframes
Combine multiple transformations (translation and scaling)
Change color during animation

Apply Animation Properties to HTML Elements

In this step, you'll learn how to apply animation properties to HTML elements, bringing your keyframe animations to life. We'll modify the previous styles.css file to add specific animation properties that control how the animation behaves.

Update the styles.css file with the following CSS:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;

  /* Animation properties */
  animation-name: moveAndResize; /* Name of the keyframe animation */
  animation-duration: 3s; /* Total time of one animation cycle */
  animation-timing-function: ease-in-out; /* Smooth acceleration and deceleration */
  animation-delay: 1s; /* Wait 1 second before starting */
}

@keyframes moveAndResize {
  0% {
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  50% {
    transform: translateX(200px) scale(1.5);
    background-color: green;
  }

  100% {
    transform: translateX(400px) scale(1);
    background-color: red;
  }
}

Key animation properties explained:

animation-name: Links the element to a specific @keyframes rule
animation-duration: Sets the total time for one complete animation cycle
animation-timing-function: Controls the animation's speed curve
animation-delay: Specifies a waiting period before the animation starts

You can also use the shorthand animation property to combine these:

.animated-box {
  animation: moveAndResize 3s ease-in-out 1s;
}

Example output:

[A blue box that:
 - Waits 1 second before starting
 - Moves smoothly from left to right
 - Changes size and color gradually
 - Takes 3 seconds to complete one animation cycle]

Customize Animation Timing and Iteration

In this step, you'll learn how to fine-tune your CSS animations by controlling their timing, iteration, and direction. We'll expand on the previous example to demonstrate advanced animation customization.

Update the styles.css file with the following CSS:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;

  /* Customize animation properties */
  animation-name: moveAndResize;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.5, 0.1, 0.3, 1);
  animation-iteration-count: 3; /* Repeat animation 3 times */
  animation-direction: alternate; /* Reverse direction on each iteration */
  animation-fill-mode: forwards; /* Keep final state after animation */
}

@keyframes moveAndResize {
  0% {
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  100% {
    transform: translateX(400px) scale(1.5);
    background-color: red;
  }
}

Key animation customization properties:

animation-timing-function: Controls the speed curve (e.g., cubic-bezier() for custom acceleration)
animation-iteration-count: Defines how many times the animation repeats
animation-direction: Determines animation playback direction
animation-fill-mode: Specifies how styles are applied before/after animation

You can also use the shorthand animation property:

.animated-box {
  animation: moveAndResize 3s cubic-bezier(0.5, 0.1, 0.3, 1) 3 alternate forwards;
}

Example output:

[A blue box that:
 - Moves and resizes 3 times
 - Changes direction with each iteration
 - Uses a custom speed curve
 - Remains at the final position after animation]

Experiment with Advanced Animation Effects

In this step, you'll explore advanced CSS animation techniques by creating a multi-element, complex animation that demonstrates the power of CSS keyframes and transforms.

Update the index.html file to include multiple animated elements:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Advanced CSS Animations</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="circle circle1"></div>
      <div class="circle circle2"></div>
      <div class="circle circle3"></div>
    </div>
  </body>
</html>

Replace the contents of styles.css with the following advanced animation:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  opacity: 0.7;
}

.circle1 {
  background-color: #ff6b6b;
  animation: orbit1 4s infinite linear;
}

.circle2 {
  background-color: #4ecdc4;
  animation: orbit2 4s infinite linear;
}

.circle3 {
  background-color: #45b7d1;
  animation: orbit3 4s infinite linear;
}

@keyframes orbit1 {
  0% {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

@keyframes orbit2 {
  0% {
    transform: rotate(120deg) translateX(200px) rotate(-120deg);
  }
  100% {
    transform: rotate(480deg) translateX(200px) rotate(-480deg);
  }
}

@keyframes orbit3 {
  0% {
    transform: rotate(240deg) translateX(250px) rotate(-240deg);
  }
  100% {
    transform: rotate(600deg) translateX(250px) rotate(-600deg);
  }
}

Key advanced animation techniques demonstrated:

Multiple simultaneous animations
Complex rotation and translation
Infinite animation with linear timing
Staggered orbital motion
Opacity and color variations

Example output:

[Three colored circles orbiting around a central point
 - Circles move at different distances
 - Continuous, smooth rotation
 - Overlapping, translucent effect]

Summary

In this lab, participants explored the fundamentals of CSS3 animation keyframes, learning how to create dynamic web animations without using JavaScript. The lab focused on understanding the @keyframes rule syntax, which allows developers to define complex animation sequences using percentage-based or from/to states. Participants learned to specify animation behaviors by transforming CSS properties such as position, color, and size at different stages of an animation sequence.

The practical exercises guided learners through creating basic and advanced animation effects, including moving elements across the screen, changing colors, and customizing animation timing and iterations. By experimenting with different keyframe configurations, participants gained hands-on experience in crafting smooth, engaging web animations that enhance user interface interactivity and visual appeal.

Create CSS3 Animations with Keyframes

Introduction

Understand CSS3 Animation Keyframes Syntax

Define Basic Animation Using @keyframes Rule

Apply Animation Properties to HTML Elements

Customize Animation Timing and Iteration

Experiment with Advanced Animation Effects

Summary

Other CSS Tutorials you may like