Learning Plan 7: CSS3 Animations

CSS Technologies — Natasha Scott

Overview of Learning Plan 7

Animations Sample

Sample animation

Description

A set of simple animations applying the core animation concepts from this learning plan.

Reflection

Before this LP I had only coded one animation. I learned several simple ones here and need considerably more practice to feel confident.

Animations Tutorial

Animation tutorial

Description

Tutorial from "CSS3 Transformations and Animations" by Craig Buckler — animations on words, tooltips, buttons, and a horizontal accordion menu.

Reflection

I was familiar with animations going in, but this tutorial pushed me much further — especially the accordion menu. Still want to practice animating more diverse elements.

Practical Application

Practical application

Description

A real webpage combining LP5, LP6, and LP7 skills — featuring a typing animation, bouncing scroll indicator, and animated button.

Reflection

I always loved typing animations and finally got to build one. I found the bouncing scroll indicator and animated button through research. All are things I plan to use in future projects.

Image Sprite Samples

Description

Three examples of image sprites with different animation techniques applied.

Sprite sample 1

Reflection

I had learned about sprites before but never used them in a project. This refresher gave me confidence to add a sprite sheet to future websites.

Image Gallery Sample

Image gallery sample

Description

A responsive image gallery with eight images — four columns, two rows — optimized for multiple devices.

Reflection

Making a gallery was familiar territory. This was a good review, and I want to explore building more extensive gallery layouts next.