Project: Sunrise
Project: Sunrise
Embedded Files
Introduction
Introduction
Create an animated sunrise. Learn how to use CSS code to animate various properties of images and make a simple animated scene.
What you will make
What you will make
An animated sunrise like this one.
What you will learn
What you will learn
Styling with CSS to define size, shape, position and colour of elements.
Animation with CSS using @keyframes.
What you will need
What you will need
A computer or tablet capable of accessing the internet.
Let's get started
Let's get started
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.
Page updated
Google Sites
Report abuse