CSS3 Transitions Exercises

Transitions allow changes to CSS properties to occur smoothly over a specified period, providing an animated effect.

transition-property: the property involved in the transition.
transition-duration: how long the transition takes to complete (in seconds)
transition-timing-function: how the transition effect animates. Sample values include
- ease
- ease-in
- ease-out
- ease-in-out
- linear
- cubic-bezier (define your own timing curve)

Shorthand Code For Transitions

The basic 3 components of defining transitions can be declared in one line with the shorthand format (transition:property duration timing-function;), for example:

transition pattern: transition:property durationInSeconds timingFunction delay;

Transition Examples

Transition Opacity

The yellow button image is absolutely positioned so that it overlaps a green button image beneath it.

First add a :hover pseudoclass to the id="image_top" that will set it's opacity to 0;
Then add the transition states: First apply a transition to the opacity of #image_top. Note how the transtion is applied to both the :hover and non-hover states.
Relocate the transition code from #image_top to #image_top:hover. Note how the transtion is applied to only the change from non-hover to :hover.
For full control over this behavior, define transition code in both the before (#image_top) and after (#image_top:hover) rules.
Follow the pattern:
-vendorprefix-transition:property duration timing-function;
use the notes below to guide to on the syntax
demonstrate the finished transition to your instructor

Transition Several Properties

Add transtion code that will alter the width or the height of the form inputs when they are in the focus state.

transition either the width or the height. note how you will need to set the width in CSS for both the :focus and not :focused states.
try transitioning several CSS properties (width, height and border) at once by using all as the assigned transitional property, eg: transition:all 1s ease;