A challenge to implement a pixel-perfect animation in pure css.
Duration: 6 hours
Team: false
Repo: css-animation-drill
First, read the criteria so that you know what is expected of you.
Then, learn about CSS animations.
In this exercise, you will build a complex animation, step by step.
As often with CSS, this is an exercise in precision and accuracy (and a zest of dementia, because… CSS). To give you a reliable visual assistant, you will thus use a technique that could be called “the image background guide Technique”.
Tip: the image background guide Technique: for each step of the exercise, use these images (zip) as your body’s background image (with a slight opacity perhaps?) to help you style precisely.
Of course, when done, remove the background image for a cleaner look.
<div id="stage" style="background: transparent url(./images/css_animation_exercise_stage.png) 0 0 no-repeat;">
- Create a standard index.html page
- Create the stage: add a div with the id “stage”, style it so that it appears exactly like this image, and in the horizontal middle of your index page.
- Add a div with an id “hero”.
- Style the
#heroso it looks exactly like this:
Now, construct the animation step by step.
Move the hero to the right, one time.
Move the hero to the right, in 5 seconds, indefinitely (loop animation).
Move the hero to the right, then to the left, in 2 seconds, indefinitely (loop animation).
Oh well, that was a ton of fun. But let’s go back to step 2.
You got it ? Ok, now follow these instructions. Think “pixel-perfect”.
Are you sure ? Review the criteria before sending your work to the coaches.
Bravo !
