CSS transition Property: Creating Transitions in CSS

The CSS transition shorthand property specifies the transitions for changes in CSS property values. As a shorthand, transition can set the values of multiple transition-related CSS properties at once.

How to Use the transition Property in CSS

The transition property can specify the property, duration, timing function, and delay when an element’s property value changes. As a shorthand property, it unites transition-property, transition-duration, transition-timing-function, transition-delay, and transition-behavior.

element {
  transition: property duration timing-function delay;
}

• property: The CSS property to apply the transition to (e.g., width, height).
• duration: The duration of the transition (e.g., 2s for two seconds).
• timing-function: Defines the speed curve of the transition (e.g., ease, linear, ease-in-out).
• delay: An optional parameter specifying the delay before the transition starts.

Basic Usage

.box {
  transition: width 2s ease-in-out;
}

.box:hover {
  width: 300px;
}

When to Use the transition Property in CSS

CSS transitions are great for enhancing the user experience by adding smooth animations to your web pages.

Hover Effects

You can use the transition property to create engaging hover effects on buttons, links, and other interactive elements.

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: green;
}

State Changes

Transitions can smoothly animate state changes, such as expanding an accordion menu or revealing hidden content.

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.accordion-content.open {
  max-height: 200px;
}

Loading Indicators

Subtle transitions can improve the user experience for loading indicators, like a progress bar filling up.

.progress-bar {
  width: 0;
  transition: width 1s linear;
}

.progress-bar.active {
  width: 100%;
}

Examples of Using transition in CSS

Navigation Menus

Websites often use transition for dropdown menus to create smooth, flowing animations.

.nav-menu {
  height: 0;
  transition: height 0.4s ease-out;
}

.nav-menu.open {
  height: 200px;
}

Modal Windows

Transitions can enhance modal window appearances and dismissals for a polished look and feel.

.modal {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.modal.visible {
  opacity: 1;
}

Image Galleries

Image galleries often show transitions when switching between photos to create seamless user experiences.

.gallery img {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.gallery img.active {
  opacity: 1;
}

Learn More About the CSS Transition Property

CSS Transition Property

The standalone transition-property property specifies the name of the CSS property to which the transition applies. You can transition multiple properties by separating them with commas.

.property-box {
  transition: width 2s, background-color 1s;
}

.property-box:hover {
  width: 300px;
  background-color: yellow;
}

CSS Transition Duration

The transition-duration property sets the length of time a transition should take. This property is crucial for controlling the speed of the transition.

.duration-box {
  transition: width 2s; /* Transition duration of 2 seconds */
}

.duration-box:hover {
  width: 300px;
}

CSS Transition Timing Function

The transition-timing-function property defines the speed curve of the transition. It allows you to control the acceleration and deceleration of the transition.

.timing-function-box {
  transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1); /* Custom timing function */
}

.timing-function-box:hover {
  transform: scale(1.5);
}

CSS Transition Delay

The standalone transition-delay property specifies when the transition will start. This allows you to delay the start of the transition for a specified amount of time.

.delayed-box {
  transition: background-color 0.5s ease 1s; /* 1s delay */
}

.delayed-box:hover {
  background-color: red;
}

Multiple Properties Transition

You can transition multiple CSS properties by separating them with commas. By transitioning multiple properties, you can create composite animations.

.multiple-transition {
  transition: width 2s, background-color 1s;
}

.multiple-transition:hover {
  width: 300px;
  background-color: yellow;
}

Cubic Bezier

The cubic-bezier function lets you define custom timing functions, giving you fine control over the transition's speed curve.

.bezier-transition {
  transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.bezier-transition:hover {
  transform: scale(1.5);
}

Transition End Events

JavaScript can detect when transitions through the transitionend event, allowing further interaction.

<div class="transition-box"></div>

.transition-box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s;
}

.transition-box.expanded {
  width: 200px;
}

const box = document.querySelector('.transition-box');

box.addEventListener('transitionend', () => {
  console.log('Transition finished!');
});

box.classList.add('expanded');