CSS Animation Timing Function Lab

Easy
36
62.3% Acceptance

In this interactive lab, we'll delve into the world of CSS animations, primarily focusing on the keyframe animation. You'll develop your skills by creating a CSS keyframe animation, making a box move across the screen from left to right infinitely.

Concepts

Here are some concepts you'd require to understand and complete this lab:

  • CSS Animation: Learn how CSS animation works, specifically using the @keyframes rule.
  • CSS Timing Function: Understanding of what a linear timing function is and how to apply it to CSS animations.
  • CSS Positioning: Familiarity with the absolute positioning in CSS which is used to move the box.

Steps

Follow these steps to successfully complete the lab:

  1. Begin by creating your HTML foundation. Set up a standard HTML skeleton inside the index.html file, and include a div with the id "box".
  2. Next, in your style.css file, you want to style your box. Give it a width, height, and background color. Don't forget to set your box's position property to absolute.
  3. Now comes the fun part, the animation. You have to create a keyframe animation which we will call 'move'. This will entail defining the movement of the 'box' from one position to another.
  4. Apply the 'move' animation to the box. Ensure the animation lasts 3 seconds with a linear timing function. Set the animation to loop infinitely.
  5. Finally, define the keyframes for the 'move' animation. At 0%, it should start at the far left of the screen (left: 0), and at 100%, it should be towards the far right. Note that we have to account for the width of the box in the 100% keyframe (left: calc(100% - 50px)).

Examples

Here is a basic example of using CSS @keyframes animation:

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

This example changes the background color of an element over the course of the animation.

Hints

If you find the lab challenging, the following hints might help:

  • Remember to set the position property of the div to absolute before you apply animation.
  • When calculating the final position of the box in the 100% keyframe, subtract the width of the box from 100%. You can do this using the calc() function, i.e., left: calc(100% - 50px).
  • The keyword infinite in the animation shorthand property makes the animation play an infinite number of times. It can be very useful indeed!