CSS Transitions – How to Create Smooth Transitions between CSS Values

CSS transitions provide a smooth and gradual way to change a specific CSS property’s value.

So, instead of allowing browsers to change a property’s value immediately, CSS transitions cause the change to happen smoothly over a specified period of time.

For instance, suppose you wish to change an element’s size on hover. In that case, you have two options:

1. Implement the change without CSS transitions.
2. Use CSS transitions to transition smoothly from the element’s initial size to its new state.

Let’s see some examples of the two options.

How to Change an Image’s Size on Mouse Hover without Using CSS Transitions

CSS

img {
  width: 40%;
}

img:hover {
  width: 100%;
}

HTML

<img
  src="https://cdn.pixabay.com/photo/2022/07/07/10/46/woman-7306978_960_720.jpg"
  alt=""
/>

Try Editing It

The code above instantaneously changes the image’s size from its initial width (40%) to its new dimension (100%) because we did not use CSS transitions.

With CSS transitions, you will get a much more pleasing experience. Let’s see an example below.

How to Change an Image’s Size on Mouse Hover with CSS Transitions

CSS

img {
  width: 40%;
  transition: width 3s ease-out 0.4s;
}

img:hover {
  width: 100%;
}

HTML

<img
  src="https://cdn.pixabay.com/photo/2022/07/07/10/46/woman-7306978_960_720.jpg"
  alt=""
/>

Try Editing It

We used the transition property to create a smooth and gradual transition from width: 40% to width: 100%.

Don’t worry if you are unfamiliar with the transition code above. In the following sections, we will discuss how CSS transitions work.

Let’s start by discussing what CSS transition properties are.

What Are the CSS Transition Properties?

The CSS transition properties define how browsers should apply transition effects on an HTML element.

Categories of CSS Transition Properties

We have two categories of CSS transition properties:

• Required transition properties
• Optional transition properties

Let’s discuss the two.

AD

What Are the Required CSS Transition Properties?

The two required properties you need to create CSS transitions are:

• transition-property
• transition-duration

What is the CSS transition-property?

The CSS transition-property specifies the CSS property you wish to transition from its initial to its new state.

What is the CSS transition-duration property?

The CSS transition-duration property defines the length of time in which browsers should complete the selected element’s transition. In other words, transition-duration sets the total start-to-finish time.

Note the following:

• The transition-duration property only accepts time in milliseconds (ms) or seconds (s).
• Zero seconds (0s) is the transition-duration’s default value. Therefore, no transition event will occur if you do not define a transition-duration property.
• transition-duration accepts only a zero (0) or a positive numeric value. Browsers will ignore the duration declaration if you provide anything else.

Examples of the required CSS transition properties

Below are some examples of the two required CSS transition properties.

How to transition an element’s width within three seconds

CSS

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
}

img:hover {
  width: 100%;
}

HTML

<img
  src="https://cdn.pixabay.com/photo/2022/07/07/10/46/woman-7306978_960_720.jpg"
  alt=""
/>

Try Editing It

Here’s what we did in the snippet above:

1. The transition-property tells browsers to transition the img’s width from its initial value (40%) to its new state (100%).
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.

Therefore, instead of an instantaneous change from the image’s initial width (40%) to its new size (100%), browsers will transition smoothly between the old and new state in three seconds (3s).

How to transition a font’s size within five seconds

CSS

p {
  font-size: 1rem;
  transition-property: font-size;
  transition-duration: 5s;
}

p:hover {
  font-size: 7rem;
}

HTML

<p>I love CodeSweetly! 😍</p>

Try Editing It

Here’s what we did in the snippet above:

1. The transition-property informs browsers to transition the p element’s font-size.
2. We used the transition-duration property to define five seconds (5s) duration from the start to the end of the transition.

Therefore, instead of an immediate change from the paragraph’s initial font size (1rem) to its new size (7rem), browsers will transition smoothly between the old and new state in five seconds (5s).

Let’s now discuss the optional CSS transition properties.

What Are the Optional CSS Transition Properties?

The two optional CSS transition properties are:

• transition-timing-function
• transition-delay

What is the CSS transition-timing-function property?

The CSS transition-timing-function property defines the implementation timing (speed) of the selected element’s transition.

In other words, the transition-timing-function specifies the speed for implementing the transition at various intervals of its duration.

The values the transition-timing-function property accepts are:

• ease: Starts the transition slowly. Then, speeds it up and ends it slowly. ease is the transition-timing-function property’s default value. It is equivalent to cubic-bezier(0.25,0.1,0.25,1).
• ease-in: Starts the transition slowly with a gradual increase in speed. It is equal to cubic-bezier(0.42,0,1,1).
• ease-out: Start fast and end the transition slowly. It is equivalent to cubic-bezier(0,0,0.58,1).
• ease-in-out: Starts and ends the transition slowly. It is equivalent to cubic-bezier(0.42,0,0.58,1).
• linear: Starts and ends the transition using a consistent speed throughout the transition’s duration. It is equivalent to cubic-bezier(0,0,1,1).
• cubic-bezier(p1, p2, p3, p4): Allows you to define the values of the cubic-bezier curve.

What is the CSS transition-delay property?

The CSS transition-delay property defines how long the browser should wait before it starts the transition.

Note the following:

• The transition-delay property must be in milliseconds (ms) or seconds (s).
• 0s is the transition-delay’s default value. It causes the transition to start immediately from the moment browsers apply it to an HTML element.
• A negative value causes the transition to start immediately from the specified time. For instance, suppose an element’s transition-delay value is -3s. In that case, the transition will begin immediately at 3 seconds.
• A positive value causes the transition to start after the specified delay time has elapsed. For instance, suppose an element’s transition-delay value is 3s. In that case, the transition will begin after a 3-second delay.

Examples of the optional CSS transition properties

Below are some examples of the two optional CSS transition properties.

How to transition an element’s width with an ease-out speed

CSS

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: ease-out;
}

img:hover {
  width: 100%;
}

HTML

<img
  src="https://cdn.pixabay.com/photo/2022/07/07/10/46/woman-7306978_960_720.jpg"
  alt=""
/>

Try Editing It

Here’s what we did in the snippet above:

1. The transition-property informs browsers to transition the img element’s width.
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.
3. We used the transition-timing-function property to begin the transition quickly and end it slowly.

How to transition an element’s width with a linear speed

CSS

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
}

img:hover {
  width: 100%;
}

HTML

<img
  src="https://cdn.pixabay.com/photo/2022/07/07/10/46/woman-7306978_960_720.jpg"
  alt=""
/>

Try Editing It

Here’s what we did in the snippet above:

1. The transition-property informs browsers to transition the img element’s width.
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.
3. The transition-timing-function property tells browsers to transition from the element’s initial width to its new size using a consistent transition speed throughout.

AD

How to transition an element’s width with a two-second delay

CSS

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

img:hover {
  width: 100%;
}

HTML

<img
  src="https://cdn.pixabay.com/photo/2022/07/07/10/46/woman-7306978_960_720.jpg"
  alt=""
/>

Try Editing It

Here’s what we did in the snippet above:

1. The transition-property informs browsers to transition the img element’s width property.
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.
3. The transition-timing-function property transitions the img element’s width using a consistent transition speed.
4. We used the transition-delay property to apply a two-second (2s) delay to the starting time of the transition.

Now that we know the CSS transition properties, we can discuss defining them with a shorthand syntax.

Shorthand for Defining the CSS Transition Properties

We use the transition property as shorthand for the transition-property, transition-duration, transition-timing-function, and transition-delay properties.

In other words, instead of writing:

img {
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

You can alternatively use the transition property to shorten your code like so:

img {
  transition: width 3s linear 2s;
}

Try Editing It

Here is the transition property’s syntax:

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

Note that you can use the transition property to transition the state of multiple CSS properties.

Here’s an example:

CSS

img {
  width: 40%;
  opacity: 0.4;
  transition:
    width 3s linear,
    opacity 4s ease-out,
    transform 5s;
}

img:hover {
  width: 100%;
  opacity: 1;
  transform: rotate(45deg);
}

HTML

<img
  src="https://cdn.pixabay.com/photo/2022/07/07/10/46/woman-7306978_960_720.jpg"
  alt=""
/>

Try Editing It

The snippet above used commas (,) to separate each of the transitional properties we are applying to the img element.

Important Stuff to Know about CSS Transitions

1. You can’t animate all CSS properties. Have a look at MDN’s Animatable CSS properties article to see the ones you can animate. It’s not all CSS properties you can animate.
2. You can use CSS transitions to make JavaScript functionality smooth.
3. CSS transition is an expensive operation for most CSS properties—except opacity and transform. In other words, applying transitions to any CSS box model property is inherently a CPU-intensive task. Therefore, animate only opacity, and transform properties if you are concerned about your page’s performance.
4. Be mindful of the layout repainting issues that CSS transitions may cause through your elements’ stacking order.

CSS Transitions vs. CSS Animations: What’s the Difference?

Below are five key differences between CSS transitions and CSS animations.

1. What is the purpose of CSS transitions and animations?

CSS transitions create smooth transitions from one CSS value to another.

CSS animations animate the style change from one CSS keyframe to another.

2. Do CSS transitions and animations need triggers?

You need triggers to run CSS transitions.

For instance, you can use the :hover pseudo-class to run transitions when a user’s pointer hovers over an element.

Alternatively, you can trigger transition effects using JavaScript to add or remove a class.

On the other hand, CSS animations do not need triggers. CSS animations run automatically by default. You can optionally use triggers to make it run only when an element is in a specific state.

3. How many states do CSS transitions and animations have?

CSS transitions have only two states: an initial and a final state. You cannot create intermediate steps.

CSS animations allow you to create multiple states.

4. Can CSS transitions and animations run multiple times?

CSS transitions run only once. But you can run multiple CSS animations iterations—even to infinity.

5. What is the recommended use of CSS transitions and animations?

CSS transitions are best used for basic style changes, while CSS animations are suitable for dynamic style changes.