Understanding CSS3 Transitions

Last updated on February 25, 2018

The transitions properties allow us to set delay time while elements changing from one state(style) to another state(style).

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

Example: CSS3 Transitions

Explanation if you mouse over the div, width will increase up to 200px with animation, if you remove mouse it will go to previous state with same animation(same time).

Example: Multiple Transitions:

Explanation if you mouse over the div, width and height will increase up to 200px with animation, if you remove mouse it will go to previous state with same animation(same time).

What are transition properties

transition – property is a shorthand property used to represent up to four transition-related longhand properties.
transition-delay – property tells when the transition effect will start.
transition-duration – property Specifies how many seconds or milliseconds a transition effect takes to complete.
transition-property – Specifies the name of the CSS property the transition effect is for
transition-timing-function – Specifies the speed of the transition effect , possible values ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier (which allows you to define your own timing curve).

How cubic-bezier Works:

cubic-bezier(P1x, P1y, P2x, P2y), here p1x and p2x are indicating time, and p1y,p2y are indicating Change in Property, An important thing to note is that the points that get passed in the cubic-bezier function can only be between 0 and 1.

Browser compatibility

CSS transitions are supported in every version of Chrome and Safari, FF 4+ and even IE also supports it from 10.5+. If the transitions are not supported by user browser, then the effects will be shown without delay(instantly).

Note : web-kit browser requires vendor prefix -webkit-, -moz-, or -o-