Keyframe animations in CSS - Mini Project: Build & Apply

Create a Simple Keyframe Animation with CSS

📖 Scenario: You want to make a box on a webpage move smoothly from left to right and back again. This will catch the visitor's eye and make your page more lively.

🎯 Goal: Build a CSS animation using @keyframes that moves a square box horizontally across the screen and back continuously.

📋 What You'll Learn

Create a CSS @keyframes rule named slide that moves an element from left 0 to left 200px and back.

Create a CSS class called box that sets width, height, background color, and position relative.

Apply the slide animation to the box class with a duration of 4 seconds and infinite repetition.

Use semantic CSS properties and ensure the animation runs smoothly.

💡 Why This Matters

🌍 Real World

Keyframe animations are used on websites to create smooth movements and transitions that attract user attention and improve user experience.

💼 Career

Web developers often use CSS animations to enhance the look and feel of websites, making them more interactive and visually appealing.

1

Create the box style

Write CSS to create a class called box that sets width to 100px, height to 100px, background-color to blue, and position to relative.

CSS

/* Create the .box class with width, height, background-color, and position relative */
/* Your code here */

Need a hint?

Use the CSS class selector .box and set the properties exactly as described.

2

Define the keyframes animation

Write a CSS @keyframes rule named slide that moves the element's left property from 0px at 0% to 200px at 50%, then back to 0px at 100%.

CSS

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

/* Define @keyframes slide to move left from 0px to 200px and back */
/* Your code here */

Need a hint?

Use @keyframes slide and define the left property at 0%, 50%, and 100% as described.

3

Apply the animation to the box

Add to the .box class the CSS property animation with the value slide 4s infinite to run the slide animation continuously every 4 seconds.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  /* Add animation property here */
}

@keyframes slide {
  0% { left: 0px; }
  50% { left: 200px; }
  100% { left: 0px; }
}

Need a hint?

Use the animation property inside .box with the exact value slide 4s infinite.

4

Add HTML to show the animated box

Write the HTML code to create a <div> element with the class box so the animation is visible on the page.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  animation: slide 4s infinite;
}

@keyframes slide {
  0% { left: 0px; }
  50% { left: 200px; }
  100% { left: 0px; }
}

Need a hint?

Use a <div> tag with the class attribute set to box.