CSS Transitions

CSS transitions are used to make the animation look smooth while changing the CSS properties. Without using transitions, while changing CSS properties the elements take the changes immediately which gives a bad user experience.

For eg: on hover changing the button color from red to green. Without transition, on hover, it will immediately change color from red to green but when CSS transition is used it will change color smoothly with the intermediate state which is implicitly decided by the browser but some parameters can be controlled explicitly by using CSS transition properties

CSS transition gives you control of what all properties should be animated, what should be animation completion time, how will transition run (eg: slow first then fast, and again slow) using timing function, and what should be the delay before the animation starts.

Ahh! I guess that’s too much of the theory part for CSS transition xD. Now let’s dive into the practical implementation. 

Note: Not all properties are animatable. List of animatable properties,

There are two ways to implement CSS transition, using shorthand transition property ( recommended ) which takes all the necessary values, or else handling all the properties individually. First, let us study them individually to help u understand transition better

CSS transition properties:

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

transition-property :

    This property lets you specify which properties should be animated.

transition-property: <animatable-properties>

It takes a single as well as multiple properties (comma separated) (which are allowed ) as parameters.

The default value for transition-property is all. Note here all is a key.

transition-duration :  

    This property allows you to set the duration(in sec or millisecs) for which the transition should occur. You can give one value or multiple values for different transition-property values.    

transition-duration: <number>s

Note: This is an important property you be specified else no transition will occur cause its default value is 0.

transition-timing-function :

    This property defines in what manner the intermediate values for the transition should changes. 

transition-timing-function: <pre-defined | cubic-bezier function>

For eg: slow first then fast and then slow.  For this, there are some defined timing functions or using cubic-bezier function. 

You can also take the help of some of these functions.

• ease – transition with a slow start, then fast, then end slowly (this is the default value)
• linear – transition with the same speed from start to end
• ease-in – transition effect with a slow start
• ease-out – transition effect with a slow end
• ease-in-out –  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

transition-delay : 

    This property defines after how much duration(in secs) the transition should start. 

transition-delay: <number>s

The default value for transition-delay is 0.

Below is the example and playground for you guys to try the all transition individual properties

transition : 

    This is the shorthand property which take all the above values

transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>

    It take multiple values for different property which has to be comma separated 

Below is the example for the transition shorthand property. To play around with the code you can just use the below codepen