CSS Animation Classes For Kids, Class 3
This is the third and final class of a CSS animations for kids series; the first class and additional series details can be found here.
All original teaching materials for these classes are open source, so please feel free to use them as is for copy and customize to your situation.
Class 3: 3D Dot
The second class, Bounce Dot, introduced
opacity, animating size, coordinating two separate animations, manipulating the appearance of transitions through setting multiple moments, and defining transition timing in animation assignment.
See the Pen Class 3: 3D Dot by Joni Trythall (@jonitrythall) on CodePen.
This final class introduces x and y axis rotations,
preserve-3d, unique border styling,
transform-origin, and the
linear timing-function value. This class can be conducted within 1 hour.
- Description, summary (repo)
- Full agenda
- Teacher Notes
- Slides presentation
- HTML Slides
- Original visuals
- Reference site for students (site, repo)
Happy Teaching 👋
I hope these teaching materials prove handy and classes are enjoyable. I also recently wrote up some general advice on conducting workshops.
I’m not sure what my next project will be just yet, but I have a questionable habit of sharing all my thoughts and adventures on twitter.