CSS3 Transitions

Overview

In this module,we studied transitions. Transitions are useful for smooth animation and motion. They allow you to change property values and include the ability to change delay, timing-functions, and durations.

Part 1: CSS Transitions Sample Practice Work

Description

Using sources available to us, the project was to create sample transitions. I created 9 transition samples.

Practice

Sample Transition Page

Reflection

Many times you see multiple transitions being used for one element. It can be somewhat difficult to know which one is responsible for the reaction you are looking for. This practice helped me identify which transition was responsible for a given action, it helped clarify the properties like duration and timing-function.

Part 2: CSS Transitions Project

Description

I continued to work on my sample page for the module project. The project was to show use of the required properites and values of the transition-timing-functions.

Project

Transition Project

Reflection

After completing the project, transitions are more clear. The project challenged me to think about user experience and using smooth animations in web design.