transition

Overview

The transition property is a shorthand for controlling animations by defining the change of CSS properties over time. It allows you to specify the transition between two states of an element, which can be defined using pseudo-classes like :active or :hover, or by turning to JavaScript.

Specifically, transition is a shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay, which together define the property to animate, the duration, the easing function, and the delay of the animation.

Examples and Usage

Below, we created a transition effect for a box with text inside that changes color and expands when hovered. We use the all keyword to apply the transition to all animatable properties, with a duration of 0.3s and an easing function. Additionally, we included vendor prefixes -webkit-, -moz-, and -o- for better compatibility with older browsers.

HTHML Structure

<div id="box">
  <p>Web Reference</p>
</div>

CSS Styling

#box {
  width: 200px;
  height: 100px;
  background-color: #FBBF24;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease; /* Transition with all properties, 0.3s duration, and ease timing function */
  -webkit-transition: all 0.3s ease; /* For Safari and older Chrome versions */
  -moz-transition: all 0.3s ease; /* For older Firefox versions */
  -o-transition: all 0.3s ease; /* For older Opera versions */
}

#box:hover {
  background-color: #CD3333;
  cursor: pointer;
  width: 300px;
  height: 150px;
}

#box p {
  font-family: 'ui-monospace', monospace;
  transition: all 0.3s ease; /* Transition with all properties, 0.3s duration, and ease timing function */
  -webkit-transition: all 0.3s ease; /* For Safari and older Chrome versions */
  -moz-transition: all 0.3s ease; /* For older Firefox versions */
  -o-transition: all 0.3s ease; /* For older Opera versions */
}

#box:hover p {
  font-size: 1.5rem;
}

The example above demonstrates a transition effect that applies to all animatable properties. However, you can also specify individual properties to animate by listing them in the transition property.

Syntax

The transition property syntax is as follows:

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

You can specify one or more transitions for different properties by using a comma-separated list. Each individual transition targets a specific property or utilizes special values like all and none to determine the applicable properties for the transition.

Associated Properties

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

Tips and Tricks

• Use the all keyword when you want the transition to apply to all animatable properties.

• Combine multiple transitions for different properties using a comma-separated list.

• The transition property can create smooth and visually appealing animations with minimal effort.

• For more control over the animation, consider using the @keyframes rule and the animation property.

• Remember that not all CSS properties are animatable.

• To avoid performance issues, try to limit the number of concurrent transitions and animations.

Browser Compatibility

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.

Furthermore, vendor prefixes such as -webkit-transition may be required for Safari and older Chrome versions, -moz-transition for older Firefox versions, and -o-transition for older Opera versions to ensure proper functionality. Refer to the Useful Resources section below for more specific information.

Useful Resources

Can I use - transition

W3C CSS Transitions Module Level 3 - Transition Shorthand Property