Transitions is used to change property values from one value to another, over a given duration. The transition effect will start when the specified CSS property changes value.

How to Use Transitions?

• CSS property you want to add an effect to
• Duration of the effect

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

Transition–

• transition-timing-function
• transition-property
• transition-duration
• transition-delay
• transition

transition-property–

This property is used to specify the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes). Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.

We can set this property to none, all and property.

Ex: –

div { transition-property: all; }

none – No property will get a transition effect
all – All properties will get a transition effect. This is Default value.
property – Defines a comma separated list of CSS property names the transition effect is for

transition-duration–

This property is used to specify how many seconds or milliseconds a transition effect takes to complete. We can set this property to time in the form of seconds or milliseconds. The default value of this property is 0s which means there will be no effect.

Ex:-

div { transition-duration: 2s; }

div { transition-duration: 1000ms; }

transition-timing-function–

This property is used to specify the speed curve of the transition effect. This property allows a transition effect to change speed over its duration. We can set this property to ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int, start or end), cubic-bezier(n, n, n, n).

Ex:-

div { transition-timing-function: ease-in; }

• ease – It Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25, 0.1, 0.25, 1)). This is Default value.
• linear – It specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0, 0, 1, 1))
• ease-in – It specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42, 0, 1, 1))
• ease-out – It specifies a transition effect with a slow end (equivalent to cubic-bezier(0, 0, 0.58, 1))
• ease-in-out – It specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42, 0, 0.58, 1))

• step-start – Equivalent to steps(1, start)
• step-end – Equivalent to steps(1, end)
• steps(int, start or end) – Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value “start” or “end”, and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value “end”
• cubic-bezier(n,n,n,n) – Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1

transition-delay–

This property is used to specify when the transition effect will start. We can set this property to time in the form of seconds or milliseconds.

Ex:-

div { transition-delay: 2s; }
div { transition-delay: 1000ms; }