CSS TRANSITION

CSS transition is used to give a smooth effect in value change of CSS property.

CSS transition controls the animation and calculates the intermediate state between two different property values. Instead of changing value instantaneously it slowly changes older to newer value.

These are transition properties:

1. transition
2. transition-delay
3. transition-duration
4. transition-property
5. transition-timing-function

1.) CSS transition

transition is shorthand property for all transition properties ( we will look for different properties further in the chapter).

For CSS transition to work you must add two things

1. The property you want to add effect on.
2. transition time other than 0.

Here is a working example that changes its color from red to blue in 2 seconds.

Output:

2.) CSS transition delay

transition-delay property controls the time of starting of the transition.

If transition effect is not mentioned then transition starts immediately as it triggered but when transition-delay is mention then effect starts taking place after mentioned time.

Output:

3.) CSS transition duration

transition-duration property defines the time in which value of any CSS property will change from value1 to value2.

If transition duration is not mentioned then transition effect is not visible as change in values takes place immediately.

Output:

4.) CSS transition property

transition-property defines the CSS property value you want transition effect for.

Suppose there are two properties that are changing its value then transition-property defines that property for which you want transition animation work for.

Output:

5.) CSS transition timing function

transition-timing-function defines the speed by which transition effect takes place.

The transition-timing-function have following values:

• ease - This is default value. It starts slow, then fast and ends slowly.
• linear - When specified the transition effect takes place at same speed from start to end.
• ease-in - Transition takes a slow start.
• ease-out - Transition takes a slow end.
• ease-in-out -Transition takes a slow start and slow end.
• cubic-bezier(n,n,n,n) - Using this you can define your own bezier curve.