transition in css

To change property values smoothly, CSS transition can be used. CSS transition allows us to transform any rapid or sudden change in property values smoothly over a period of time.

The syntax for transition is : 

"transition: property duration timing-function delay;"

• Property can be any value which is changing, be it be height, width etc.
• The duration is the time over which the transition should take place.
• Function is the way the transition would take place.
• Delay specifies the time after which the transition period starts.

The example:

<style>

      transition: width 2s linear 2s

<style>

The above example will change the width linearly over the period of 2 seconds with an offset of 1second.    

The transition-function property can have the following values:

• Linear:  Transition effect with the same speed from start to end.
• Ease: Specifies a transition effect with a slow start, then fast, then end. slowly. This is default, if nothing is specified.
• Ease-in: Transition effect with a slow start.
• Ease-out: Specifies a transition effect with a slow end.