🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

The CSS Transition Property

Reading time 4 min
Published Aug 8, 2017
Updated Sep 30, 2019

CSS transition: the shorthand

The CSS transition property is a shorthand for four transition-related subproperties:

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

The syntax for CSS transition is similar to that of many shorthands – you need to list the values without naming the subproperties:

transition: property duration timing-function delay;

A skipped subproperty will be set to its default value automatically. We will explain each subproperty in detail in the following sections. All of them can also be used individually.

Using the transition-property property

The transition-property property specifies the CSS property that the transition effect will be applied to:

Example
div {
    transition-property: width;
}

div:hover {
    width: 200px;
}

The syntax for this CSS transition property is simple:

transition-property: value;

The default value for transition-property is none, which means transitions aren't applied to any CSS properties. You can also use they keyword all to select all the properties that can have CSS transitions applied, or name an exact one.

You can also specify multiple properties by separating them with commas:

Example
div {
    transition-property: width, height;
}

div:hover {
    width: 250px;
    height: 250px;
}

Defining CSS transition duration

Using the CSS transition-duration property allows you to set how long a transition will take to finish:

Example
a {
    transition-duration: 4s;
}

To define the CSS transition duration, you need to specify it in time units (e.g., s or ms):

transition-duration: time;

The default value for this CSS transition property is 0s. That means the browser will show no transition effect – the element will simply switch from its initial stage to the result.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

CSS transition speed: ease in or out

The CSS transition-timing-function property lets you set the pace for the transition.

transition-timing-function: value;

To make the changes smoother, we use a curve model defined by four points, also called the Bezier Curve:

Example
a {
    transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}

You can define custom values for your curve as seen in the example above, or choose predefined options:

Value Description
cubic‑bezier(n,n,n,n) Different speeds at four parts of the transition defined by custom values in the range from 0 to 1
ease The default value. Increases towards the middle, then slows back down
linear Keeps a stable pace
ease-out Starts quickly and slows down
ease-in Starts slowly and speeds up
ease-in-out Transitions slowly, speeds up and slows down again

You can also specify the pace of the transition by using steps:

transition-timing-function: steps(x, term);

The x represents the number of transition steps. Each of them will be shown for the same amount of time. The term defines the way it behaves:

Term Meaning
jump-start The first jump happens at the very start of the transition
start The first jump happens at the very start of the transition
jump-end The last jump happens at the very end of the transition
end The last jump happens at the very end of the transition
jump-both Pauses are added at the very start and the very end of the transition
jump-none There are no jumps at the very start and the very end of the transition

If you want to only specify one step, use step-start instead of steps(1, jump-start), and step-end instead of steps(1, jump-end):

Example
a {
    transition-timing-function: step-end;
}

Delaying CSS transitions

To manipulate the starting time of your transition, you can use the CSS transition-delay property:

Example
div {         
   -webkit-transition-delay: 2s; /* Safari */ 
   transition-delay: 2s;
} 

Note: when using the transition CSS shorthand, keep in mind that the first time value defined will always be interpreted as the duration and the second one as the delay.

To define the delay, you need to specify it in time units (e.g., s or ms):

transition-delay: time;

The default value for this CSS transition property is 0s, which means the transition effect will start immediately. You can either delay it by using a positive value. Negative values are also allowed: they make the effect start immediately but at a certain point of the transition instead of the beginning.

Note: you can define multiple delay times if the transition will affect multiple CSS properties.

Browser support

Browser image
Chrome
26+
Browser image
Edge
12+
Browser image
Firefox
16+
Browser image
IE
10+
Browser image
Opera
12.1+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
26+
Browser image
Firefox
16+
Browser image
Opera
12.1+
Browser image
Safari
9+