transition-duration

Overview

The transition-duration property sets the period required for a transition effect to complete. As part of the CSS Transitions module, it's used in conjunction with transition-property, transition-timing-function, and transition-delay to produce customizable animations in CSS.

Examples and Usage

We'll show the use of transition-duration through a practical example: a "Call To Action" (CTA) button that changes color and size when hovered over.

HTML Structure

<button class="cta-button">Enroll</button>

Example 1: Speedy Transition

In this example, we'll apply a rapid transition effect, with the duration set in milliseconds.

/* CTA Button Styling and Transition */
.cta-button {
  font-family: 'Arial', sans-serif;  /* Modern sans-serif font */
  font-size: 1.2em;  /* Clear, legible font size */
  background-color: #007BFF; /* Primary color */
  color: #fff; /* Text color */
  border: none;
  border-radius: 4px; /* Rounded corners */
  padding: 10px 20px; /* Padding for size */
  cursor: pointer; /* Cursor style on hover */
  transition-property: background-color, transform; /* Properties to animate */
  transition-duration: 200ms; /* Speedy transition */
}

.cta-button:hover {
  background-color: #0056b3; /* Darker shade on hover */
  transform: scale(1.1); /* Slightly larger size on hover */
}

Here, transition-property specifies the CSS properties to which the transition effect will be applied, namely background-color and transform. Then, transition-duration is set to 200ms, creating a swift transition effect when the button is hovered over.

Example 2: Smooth Transition

Next, we introduce a smoother transition effect with the duration set in seconds, demonstrating the flexibility of transition-duration to accept values in both milliseconds and seconds.

/* Smooth Transition */
.cta-button {
  /* ...rest of the properties remain the same... */
  transition-duration: 0.8s; /* Smooth transition */
}

.cta-button:hover {
  /* ...hover properties remain the same... */
}

In this case, transition-duration is set to 0.8s. Upon hovering over the button, the transition of the background-color and transform properties unfolds over 0.8 seconds, creating a more noticeable and apt animation.

For wider browser support, you can include these vendor prefixes.

/* CSS with Vendor Prefixes */
.cta-button {
  /* ...rest of the properties... */
  -webkit-transition-duration: 0.8s; /* For older Chrome and Safari */
  -moz-transition-duration: 0.8s; /* For older Firefox */
  -o-transition-duration: 0.8s; /* For older Opera */
  transition-duration: 0.8s; /* Standard Syntax */
}

Values

The transition-duration property doesn't inherit values from its parent elements, and the initial value is 0s.

Associated Properties

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

Tips and Tricks

• When using transition-duration with multiple properties, you can define different durations for each property. These are applied according to their order in the transition-property list.

• If there are fewer durations than properties, the list of durations is repeated. But, if there are more durations than properties, the extra durations are ignored. This feature provides flexibility in creating complex animations.

• If you're animating multiple properties with different characteristics, consider specifying multiple durations in transition-duration. This way, you can tailor the speed of each transition to the nature of the change.

• It's often a good idea to animate transform and opacity as they don't cause re-layout and are more performant.

Browser Compatibility

Most modern browsers support the transition-duration property without the need for prefixes. However, older versions of Chrome, Safari, Firefox, and Opera, require vendor prefixes for proper functioning. Refer to the Useful Resources section below for more specific information.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: transition-duration

W3C: CSS Transitions - transition-duration property