Project: Sunrise
Project: Sunrise
Create an animated sunrise. Learn how to use CSS code to animate various properties of images and make a simple animated scene.
An animated sunrise like this one.
Styling with CSS to define size, shape, position and colour of elements.
Animation with CSS using @keyframes.
A computer or tablet capable of accessing the internet.
Use this link to go to the Code Club online project: projects.raspberrypi.org/en/projects/sunrise and follow each step in the project.
Challenge 1: Diagonal animation - edit animation @keyframe properties.
Challenge 2: Improve the sky - add more keyframes and set a background.
Challenge 3: More animation - animate more images or elements using CSS proporties.