A029j3a2 - Transition

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:

If you prefer short notation, use transition.

* To earn credit, your transition properties must be different than the examples below. Make your assignment unique **

Links:

Yahoo.com
Google.com
This is id white
background-color
This is id black
background-color
This is id orange
height
This is id gold
border-radius
This is id purple
transform rotate
This is id green
transform scale (with a delay)
This is id red
transform translate (with a delay)

mchagoyan@chusd.org

1 | 2