Transition

To create a transition effect, you must specify two things:

1. the CSS property you want to add an effect to
2. the duration of the effect

Change Several Property Values

ex>
div
{
     transition: width 2s, height 4s;
}

Transition-timing-function

The transition-timing-function property specifies the speed curve of the transition effect.

ease                - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
linear              - specifies a transition effect with the same speed from start to end
ease-in             - specifies a transition effect with a slow start
ease-out            - specifies a transition effect with a slow end
ease-in-out         - specifies a transition effect with a slow start and end
cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

ex>
#div2 {transition-timing-function: ease;}

Transition-delay

Delay the Transition Effect The transition-delay property specifies a delay (in seconds) for the transition effect.

ex>
transition-delay: 1s;