Lesson 15

Animation

Bringing your page to life

In the past, Flash was often used to create animations on the web. This is no longer the case. We can now animate directly into the browser using CSS

Play
Go to the next lesson

index.html

style.css

the web page

New Window

Tasks

  • Make the robot move up and down by altering the @keyframes travel.
  • Change the animation-duration.
  • Remove the property animation-direction and its value and see what happens.
Next Lesson
Practical understanding of CSS animations including keyframes and animation properties Badge

Basic CSS Animation

Congratulations! You’ve just earned the Basic CSS Animation badge!

If you'd like to send this badge to your Mozilla backpack, just fill out the form below.

This will push your badge to the Mozilla Badge Backpack which is governed by the Mozilla Badge Backpack Terms of Use and Privacy Policy.