Project 2_5: CSS Interactivity

Add CSS motion and linking to your design!

The ability to now highlight information with motion will enahnce how the viewer understands the information. Ask the following questions: How much is too much? How much is not enough? Does this need to move? Color? Legibility? What changes and when? Why?

Please download this .zip file to see how some of the CSS transitions and the HTML linking works

Remember/Consider:

• You have CSS Hover States and Link Hover States
• How are you displaying links? Link styles?
• Enforce/enhance visual hierarchy
• Separate and/or highlight information/sections
• Visually group information/sections
• Consider all elements from the previous: Text, Line, Shape, Color

Restrictions and Rules:

• This final part you will work with only one iteration! Choose from your a, b, c.
• All bands need to be hyperlinked — additional information can also be linked. What are you linking to? Try to be consistent.

CSS Transitions:

CSS transitions allow you to change property values smoothly, over a given duration. To create a transition effect, you must specify two things: 1.) the CSS property you want to add an effect to and 2.) the duration of the effect:

CSS Animations:

CSS allows animation of HTML elements. An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want.

See the Pen CSS Animations by Oliver Roeger (@uic-des) on CodePen.