CSS Animation Timing Function Lab
Easy
36
62.6% 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:
- Begin by creating your HTML foundation. Set up a standard HTML skeleton inside the
index.html
file, and include adiv
with theid
"box". - 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. - 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.
- Apply the 'move' animation to the box. Ensure the animation lasts 3 seconds with a linear timing function. Set the animation to loop infinitely.
- 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 thebox
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 thediv
toabsolute
before you apply animation. - When calculating the final position of the
box
in the 100% keyframe, subtract the width of thebox
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!