Overview
This module focused on mastering CSS3 animations, from understanding the animation syntax to applying creative motion design in real-world projects. Through this learning plan, I explored @keyframes, animation properties, timing functions, and image sprite animation with accessibility enhancements.
Part 1: CSS Animations Practice #1
Description: This tutorial-based sample followed the shape transformation animation from the Envato Tuts+ beginner CSS animation tutorial.
Reflection: This helped reinforce the foundational animation structure using @keyframes and transitions. It was a good refresher and built my confidence in building motion from the ground up.
Part 2: CSS Animation Bounce Box
Description: I used a custom-coded bounce box animation that added accessibility with ARIA and title attributes. The animation features a squish effect and realistic motion cues like shadow.
Reflection: This was my favorite animation to create because it feels fun and polished. I focused on refining timing functions to make the bounce smoother and more realistic while enhancing accessibility.
Part 3: Interactive Services Showcase
Description: A practical application combining animations, transitions, and interactivity to simulate a service layout. Used in a context similar to how I’d present services for a real client site.
Reflection: Building this helped me blend visual polish with interaction design. The transformations feel purposeful and not just decorative.
Part 4: Image Sprite Animation Samples
Description: This includes three sprite-based animations using techniques from the Treehouse and W3Schools tutorials. I created my own sprite sheet using Canva and coded in Dreamweaver.
Reflection: Sprite animations taught me a ton about background positioning and how sprites are used in real web apps. It was fun bringing my own art into the process and making it interactive.
Part 5: CSS Image Gallery
Description: This responsive, animated image gallery included blur and hover transitions and a lightbox-style layout. All images are placeholders that I plan to replace with my own photography or design work later.
Reflection: I wanted this gallery to feel elegant and modern. I used glassmorphic styling and motion transitions to help tell a visual story as users engage with the gallery.
Final Reflection
This module helped me elevate my creative expression through animation while staying grounded in user experience principles. I learned how timing, pacing, and interactivity can add depth to even the simplest designs. Creating sprite sheets and using ARIA in animations also taught me how to balance aesthetics with accessibility. I’m excited to carry this skill set into my future client work and personal projects.