Assignment029j3a2 - Transitions

CSS transitions allow you change element property values from one value to another smoothly over a set period of time. You can easily utilize transitions using a :hover pseudo-class.

In the examples below, all the boxes (divs) are utilizing a :hover pseudo-class. The white box does not have a transition, but the rest do. Notice how you can use transitions to change the state of the element over time.

Moving the mouse over the div (:hover), allows the transition to display the new properties. Notice that transitions can also be applied to links.

When using transitions, you can chose to use long notation or short notation. Here are the properties you can use for long notation:

transition-delay
transition-duration
transition-property
transition-timing-function

If you prefer short notation, use transition.

Links:

Yahoo.com

Google.com

This is id purple
background-color

This is id blue
background-color

This is id aqua
height

This is id beige
border-radius

This is id white
transform rotate

This is id pink
transform scale (with a delay)

This is id maroon
transform translate (with a delay)

This is id green
background-color

This is id orchid
height

This is id salmon
border-radius

This is id turquoise
transform rotate

This is id tomato
transform scale (with a delay)

This is id sienna
transform translate (with delay)

Email me at: cmelc-s072@chusd.org