Overview of Learning Plan 7
- Define animations in CSS3.
- Examine animation properties.
- Examine values for animation properties.
- Explore applications for CSS3 animations.
- Explore CSS image sprites.
- Explore CSS image galleries.
Animations Sample
Description
In this challenge, I applied the concepts in creating simple animations.
Sample AnimationReflection Statement
Before this lesson plan, I only coded one animation. In this sample, I learned how to make a few simple animations. I still need more practice coding animations.
Animations Tutorial
Description
For this tutorial, I decided to use a resource from LP6, "CSS3 Transformations and Animations" by Craig Buckler. I found this resource to be very useful and I wanted to complete the whole tutorial and complete all the exercises.
Animation TutorialReflection Statement
Prior to this learning plan, I was familiar with using animations, but in this tutorial, I was able to learn how to use different animations on words, tooltips, buttons, and I was able to make a horizontal accordion menu. I still need to practice animating different elements and making them my own.
Practical Application
Description
This website is a practical application of the use of LP5, 6, and 7 skills on a web page.
Practical ApplicationReflection Statement
Prior to this learning plan, I was not familiar with any of the animations I used. I always loved the typing animation and used this opportunity to learn how to code it and put it to a practical use. I searched for items to include on this page and found the bouncing scroll indicator and the animated button. All of these elements are things I want to incorporate on my websites. I still need to learn how to perfect my animations.
Image Sprite Samples
Description
These three samples are examples of using different kinds of image sprites and adding animations.
Sample 1
Sample 2
Sample 3
Reflection Statement
Before this lesson plan, I learned how to use image sprites but I never used them. This was a refresher for me. I now feel more confident about adding a sprite sheet to my website. I still need to learn how to perform different variations to the animations of the image sprites.
Image Gallery Sample
Description
This is a sample of an image gallery with eight images consisting of four columns and two rows. I made the image gallery responsive for multiple devices.
Image Gallery SampleReflection Statement
Prior to this learning plan, I was familiar with making a photo gallery. This was a review for me. I still need to learn to so an extensive photo gallery.