CSS3 Animations

Overview

In Module 7 we took an in-depth look at CSS3 Animations, Sprites, and Image Galleries. We learned how to use the @keyframes property and the various animation properties to create animations to enhance the user's experience. We also explored image sprites and how to implement the use of them in our web design. At the end of the module, we focused on image gallery creation.

Part 1 Sample Work from the Tutorial Practice

Description

In this first practice, we were asked to follow an easy tutorial on animation from tutsplus.com. The tutorial educated us on how to create an animation to rotate and change an image from a square to a circle.

Practice

Reflection

This tutorial was straightforward and easy to understand. It clearly explained the animation properties used and showed step-by-step examples of adding various properties to the keyframes to change color and radius of the shape. Fun tutorial to make changes to!

Side note: In Chrome there seems to be a problem with several images appearing and rotating, however, in Firefox this works perfectly - with only one image. I am still trying to find out why it is not working as expected in Chrome.

Update: It seems to be an issue with my version of Chrome, other students did not have this problem when they viewed the page.

Part 2 Sample Work From A Tutorial I Located

Description

We were instructed to find a tutorial making use of animation and create a sample. This is a video tutorial that teaches the fundamentals of CSS animations, covering transitions and keyframes. It explains how to create animations using both methods, including how to use utility classes to make animations reusable. The video also demonstrates how to create a variety of animations, such as a bouncing ball effect.

Practice

Reflection

I was pleasantly surprised how much animation was put into this 20 minute video! I can see various uses for this type of animation, not only for text but for logos and images or even a bouncing Call To Action button.

Part 3 Practical Application Web Page Sample

Description

For this practice, we were to apply our knowledge in a practical way. I chose to use my Pattycake Pizza example and animate a call-to-action button.

Practice

Reflection

Animations really draw your attention to specific parts of a page, I'd like to work a couple more into this page but don't want to overdo it. I think providing a subtle feedback would enhance the user experience but not overwhelm it.

Part 4 Image Sprite Samples

Description

Sample 1 - We were given a spritesheet with social media icons on it to practice with.

Sample 2 - We followed along with a tutorial to create this cute monster getting his fill of some mix-ins. Maybe they were for ICE CREAM!

Sample 3 - In our third sample we put everything we had learned in our sprite practices to work in an original sample.

These are the results of those practices.

Practices

Reflection

I have had some experience with sprites prior to this class, this was a good reinforcement of what I already knew. But there was more to learn too! I came across a tutorial, Sprite Sheet Animation Tutorial with HTML and CSS, that helped me understand how to change the size of the image and how to sharpen art made with pixels, similar to what you would find in some older video games. Very fun and a great module!

Part 5 Image Gallery Sample

Description

For this part of the module, we used a provided resource to create an image gallery.

Practice

Reflection

This was pretty straightforward, making it responsive was easy as well. Having a responsive gallery will be beneficial when trying to style for mobile-first. I hate going to a page with the images all out of whack and taking too long to load - especially on mobile!