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
    •  div { transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; } short notation div { transition: width 2s linear 1s; } -->

    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)
    ymora-s919@chusd.org