Learning Plan 5: CSS3 Transitions

CSS Technologies — Natasha Scott

Overview of Learning Plan 5

Transition Property Practice

Description

Activities covering all core transition properties: transition, transition-delay, transition-duration, transition-property, and transition-timing-function. Documented with screen captures.

Reflection

I had done this practice previously, so it was a review. I now feel confident using all transition properties. Still want more practice with cubic-bezier.

CSS3 Transition Samples

CSS transition samples

Description

Samples drawn from W3Schools, MDN, CSS3.Info, and Catswhocode — each resource gets its own page.

Reflection

I had to be creative in developing my samples. Organizing them by resource helped. I still need more practice to feel fully confident applying transitions in real sites.

CSS3 Transitions Project

CSS Transition Project

Description

A project demonstrating every transition property and all transition-timing-function values in practice.

Reflection

I had only done one tutorial on transitions before this plan. I learned all the different types and still need practice to use them confidently in production.