CSS Reference Guide: Transitions

The CSS transition property is a shorthand property that allows us to animate effects in CSS. transition gradually changes a CSS property from its original value to a new value over a period of time.

Jump ahead:

• Syntax
• Multiple transitions
• Component properties
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

CSS property changes from one value to another are instantaneous, like a sudden blink; to the human eye, they would be basically imperceptible. transition allows us to slow down the change so that it can happen gradually over a period of time in a way that is perceptible to the human eye.

Example:

div.banner {
    width: 100px;
    padding: 10px;
    background-color: seagreen;
    border: 1px solid deepskyblue;

    transition: width 2s;
}

div.banner:hover {
    width: 150px;
}

You can play with an example here:

See the Pen
css transitions by Chidume David (@philipsz-davido)
on CodePen.

Above, we increased the width of the element to 150px when hovered over. The transition property set in div.banner makes the increase in length render slowly over a period of 2 seconds.

We will see the width of the element expand to 150px, and the text slowly re-align itself to compensate for the width increase. When the mouse is moved away from the div.banner element, it changes its width to 100px in a slow fluid motion again, and its text wrapping reverts to its original state.

Let’s take a look at another example:

div.banner {
    width: 100px;
    padding: 10px;
    background-color: seagreen;
    border: 1px solid;

    transition: background-color 4s ease-in 1s;
}

div.banner:hover {
    background-color: limegreen;
}

You can play with the above example here:

See the Pen
css_transition_background_color by Chidume David (@philipsz-davido)
on CodePen.

Here, when a user hovers over the div.banner element, the transition delays for 1 second, and then the original background-color of seagreen is changed to limegreen over a period of 4 seconds. We see a fading effect, the seagreen color gradually dimming and the limegreen color gradually coming up to take its place.

Note that we used the :hover pseudo-class to trigger the transition. We can use other means to trigger transitions as well — for example, we might change an element’s state from valid to invalid, disable or enable the :disabled state, activate the :active state, etc.

Syntax

The transition property takes a space-separated list of values:

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

• <property> is the animatable CSS property we want to animate from its original value to a new value when the property changes
• <duration> is the period of time for which the animation will last. We can set the duration in seconds (s) or in milliseconds (ms)
• <timing-function> is a method to control the pace of the animation
• <delay> is the time to delay before transitioning

In our earlier example:

div.banner {
    ...
    transition: background-color 4s ease-in 1s;
}
...

• background-color is the CSS property of div.banner we want to animate when the property changes
• 4s is the duration of the property-change animation
• ease-in is the timing-function. This makes the effect start slow, then speed up
• The transition delays for 1s before it begins

Multiple transitions

We can set multiple properties to transition. The properties must be comma-separated.

transition: background-color 4s ease-in 1s, width 2s;

Here, two properties are set for transition animations: background-color and width. Now, transition listens for when either or all of the properties (background-color and width) change.

Component properties

The transition property is a shorthand for four longhand transition properties:

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

transition-property

The animatable property to transition.

transition-property: border-radius

This sets the border-radius as the CSS property in the element we want to run the transition effect on when it changes.

transition-property: margin-right

This triggers transition when the element’s right margin (margin-right) changes.

transition-property limits transitions to only specified properties, leaving the rest to change instantaneously. Multiple properties can be assigned to transition-property in a comma-separated list.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

Consider the example below:

transition-property: margin-right, color, border-radius;

This example selects only the right margin, text color, and border-radius properties to undergo transition whenever their values change.

transition-property can take the following values:

• none: No property is chosen for the transition
• all: All the animatable properties in the element are chosen for the transition

transition-duration

The duration of the animation, or the time it will take to complete. The unit can be set to seconds (s) or milliseconds (ms).

transition-duration: 1s

Like transition-property, you can provide multiple values for transition-duration in a comma-separated list.

transition-duration: 1s, 200ms;

Each value in the list applies, respectively, to each value set in the transition-property.

transition-property: width, color;
transition-duration: 1s, 200ms;

1s will be applied to the width property, and 200ms will be applied to the color property. This means that the transition duration of the width property value change in the element is 1 second, and the transition duration of the color property value change in the element is 200 milliseconds.

transition-timing-function

The transition effects, or how the transition will play out. It ultimately controls the speed of the transition.

The transition-timing-function can take the following values:

• ease
• linear
• ease-in
• ease-out
• ease-inout
• step-start
• step-end
• steps(n, start), where n is the number of steps—steps(n, end)
• cubic-bezier(x1, y1, x2, y2)

Let’s look at the major values from among the above:

• ease: This makes the transition start slowly, then gradually speed up, then slow down, ending very slowly
• linear: The transition speed from start to end is the same; it is linear
• ease-in: The transition starts slow and then speeds up
• ease-out: The transition starts fast, then slows down
• ease-in-out: The transition starts slowly, moves faster in the middle, then slows down, and ends not too slowly

Here’s an example:

transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in;

Above, the transition is triggered on the width property change. The transition-timing-function set to ease-in will make the width change start slowly and gradually speed up within a 1-second time frame.

transition-delay

The time between the change in property state and the beginning of the transition to the new state. The value is expressed in either seconds (s) or milliseconds (ms).

transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in;

transition-delay: 1s;

Above, we set a delay of 1s before the transition begins.

Consider another example:

transition-property: border-radius;
transition-duration: 2s;
transition-timing-function: ease-in;

transition-delay: 10ms;

Here, the transition animation will be delayed for 10ms when the element’s border-radius state changes.

If this property has a value of 0s, the transition will start immediately when the targeted property changes state.

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — Start monitoring for free.