top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

What is CSS transition and how to use it?

0 votes
What is CSS transition and how to use it?
posted Jun 26, 2017 by Sahana

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes


transition allows to add an effect while changing from one style to another. You can set the which property you want to transition, duration, how you want to transit (linear, ease, ease-in, ease-out, cubic-bezier) and delay when transition will start. you can transition more than one property by comma separation.

transition parameters

There are four parameters for CSS transitions:

The property to be tweened, or the keyword ‘all’ to apply to all properties.
The duration of the transition.
Specifies a function to define how intermediate values for properties are computed. Timing functions determine how intermediate values of the transition are calculated.
Specifies a delay to the start of the transition.

In addition, you can also use the shorthand property where the parameters are specified as property, duration, timing function, delay.


div {
    transition-property: width;
    transition-duration: 5s;
    transition-timing-function: linear;
    transition-delay: 2s;
answer Jun 26, 2017 by Subhajit Maity