CSSmarkup~30 mins

Animation duration and delay in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Animation Duration and Delay

📖 Scenario: You are creating a simple webpage with a colored box that moves across the screen. You want to control how long the animation takes and when it starts.

🎯 Goal: Build a webpage with a blue square that slides from left to right. Use CSS to set the animation duration to 3 seconds and add a delay of 2 seconds before the animation starts.

📋 What You'll Learn

Create a blue square box using HTML and CSS

Define a CSS animation that moves the box horizontally

Set the animation duration to exactly 3 seconds

Add an animation delay of exactly 2 seconds

Ensure the animation runs only once and stays at the end position

💡 Why This Matters

🌍 Real World

Animations like this are used in websites to draw attention to important elements or to create smooth transitions.

💼 Career

Understanding animation timing helps front-end developers create engaging user interfaces that feel responsive and polished.

Progress0 / 4 steps

Create the blue square box and basic HTML structure

Write the HTML code to create a div with the class box. Also, add CSS to make the box 100px wide, 100px tall, and blue in color. Use a style tag inside the <head> for CSS.

CSS






Animation Demo

  /* Your CSS here */

Need a hint?

Use a div with class box. In CSS, set width, height, and background-color.

Add the animation keyframes to move the box horizontally

Inside the <style> tag, add a CSS animation named slide that moves the box from left: 0 to left: 300px. Also, add position: relative; to the .box class so it can move.

CSS






Animation Demo

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

  /* Add keyframes for slide animation here */

Need a hint?

Use @keyframes slide with from and to blocks changing left property.

Set the animation duration to 3 seconds

Add the CSS property animation-name: slide; and animation-duration: 3s; to the .box class to make the box animate over 3 seconds.

CSS






Animation Demo

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

  @keyframes slide {
    from { left: 0; }
    to { left: 300px; }
  }

Need a hint?

Use animation-name: slide; and animation-duration: 3s; inside the .box CSS.

Add a 2-second delay and make the animation run once and stay at the end

Add animation-delay: 2s;, animation-iteration-count: 1;, and animation-fill-mode: forwards; to the .box class to delay the start by 2 seconds, run the animation once, and keep the box at the end position.

CSS






Animation Demo

  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    animation-name: slide;
    animation-duration: 3s;
    /* Add animation delay, iteration count, and fill mode here */
  }

  @keyframes slide {
    from { left: 0; }
    to { left: 300px; }
  }

Need a hint?

Add animation-delay: 2s;, animation-iteration-count: 1;, and animation-fill-mode: forwards; to the .box CSS.