CSS3 Transition Property Practice Documentation
Description
This practice has activities to allow you to practice using CSS3 transitions using the following properties: transition, transition-delay, transition-duration, transition-property, and transition-timing-function. I documented this practice with screen captures.
Practice Transitions Documentation
Reflection Statement
Before this lesson plan, I completed this practice previously on my own. I have not used any transition properties on any of the websites I have built so far. I learned how to use all the transition properties to where I am confident on using them on any of my websites in the future. I still need more practice on the cubic bezier transition property.
CSS3 Transition Samples
Description
For this page, I had to create samples of using transition properties using the following resources: W3Schools, MDN, CSS3.Info, and Catswhocode.
CSS3 Transition Samples
Reflection Statement
Prior to this learning plan, I had knowledge of transitions but did not use them outside of learning them. I had to be creative in developing my samples. I was able to put my samples to each resource on a different page and organize them. I still feel that I need to practice transitions a little more to be confident in using them on websites in the future.
CSS3 Transitions Project
Description
For this project, I had to show use of each of the CSS3 transition properties. I also had to show use of each of the transition-timing-function values.
CSS3 Transitions Project
Reflection Statement
Prior to this learning plan, I completed a tutorial on transitions but never actually used them in any websites. In this lesson plan, I learned how to use all the different types of transitions. I still need more practice on all the properties to become familiar enough to use them in my websites.