In this project, children will to learn how to animate a simple scene using CSS. They will use the CSS @keyframes rule to animate various properties of images and divs.
We recommend using trinket to write HTML & CSS online. This project contains the following trinkets:
There is also a trinket containing a sample solution to the challenges:
This project can be completed offline if preferred. You can access the project resources by clicking the ‘Download Project Materials’ link for this project. This link contains a ‘Project Resources’ folder, which includes resources that children will need to complete this project offline. Make sure that each child has access to a copy of these resources. This folder includes the following files:
You can also find a completed version of this project’s challenges in the ‘Volunteer Resources’ section, which contains:
- Styling and animation with CSS:
@keyframesrule for defining steps in an animation.
- Reinforcing the use of properties to define the size, shape, position and colour of elements on a webpage.
This project covers elements from the following strands of the Raspberry Pi Digital Making Curriculum:
- “Diagonal animation” - editing animation
@keyframeproperties to use left:;
- “Improve the sky” - add more keyframes and setting background:.
- “More animation” - animate more images or elements using a variety of CSS properties.
Frequently Asked Questions
prefixfree.jslibrary, to allow animation compatibility between browsers. If this library isn’t used, then children using older browsers will instead need to declare an animation for their browser, for example:
animation: sky 10s infinite; //for all newer browsers -webkit-animation: sky 10s infinite; // For Webkit browsers(Chrome, Safari...) -moz-animation: sky 10s infinite; // For Mozilla browsers -o-animation: sky 10s infinite; // For Opera browsers -ms-animation: sky 10s infinite; // For Microsoft browsers