Teaching kids CSS animations
I was tasked with setting up a CSS3 tutorial for kids.
They were about the age of 13 and 14.
I figured that CSS3 animation would interest them, so we went through these examples.
Earthquake On Hover
Teaching the concepts
- Check the source code of this page to see how it’s implemented.
- Teach in very small steps.
- For example, start the sun to be a yellow square.
- Then add
border-radiusto get it into a circle.
- Go through step-by-step for the first couple of examples, then leave it as a project for them in class to work out how to implement the other related examples.
- The content here covered five hours of teaching.
- At the time of writing (2013), not all CSS3 animation actions are implemented across browsers.
- You’ll see in the source code some
-webkit-elements. They’re to get Chrome working.
I’d love to hear your ideas for more CSS3 activities for teaching kids. Please leave a comment below.
Credits: Images from OpenClipart.org.