CSS Transitions

CSS Transitions allow you to provide a smooth animation effect when property values change, rather than having the change happen instantly. This greatly improves user experience, making interface interactions feel more natural and fluid.

For example, when hovering over a button, you can have its background color smoothly fade from blue to dark blue over 0.3 seconds, instead of jumping immediately.

transition-property

The transition-property property specifies the name of the CSS property you want to apply the transition effect to.

• none: No property will get a transition effect.
• all: (Default) All animatable properties will get a transition effect.
• <property-name>: Specifies one or more properties, like background-color, transform.

button {
  transition-property: background-color, transform;
}

transition-duration

The transition-duration property specifies how long the transition effect takes to complete. Units are seconds (s) or milliseconds (ms).

button {
  transition-duration: 0.3s; /* 300ms */
}

transition-timing-function

The transition-timing-function property describes the speed curve of the transition effect. It defines how fast or slow the transition is at different points in time.

• ease: (Default) Starts slow, then fast, then ends slow.
• linear: Maintains a constant speed from start to end.
• ease-in: Starts slow, then accelerates.
• ease-out: Starts fast, then decelerates.
• ease-in-out: Similar to ease, but with more pronounced acceleration and deceleration.
• cubic-bezier(n,n,n,n): Allows you to create custom speed curves.

button {
  transition-timing-function: ease-in-out;
}

transition-delay

The transition-delay property specifies how long to wait after the property value changes before starting the transition effect.

button {
  transition-delay: 1s;
}

transition (Shorthand Property)

Using the transition shorthand property is best practice. You can set all transition-related properties in a single line. The order is usually:

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

button {
  background-color: #3498db;
  color: white;
  padding: 15px 25px;
  border: none;
  cursor: pointer;
  /* Shorthand property */
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #2980b9;
}

Setting Transitions for Multiple Properties

You can define different transition effects for different properties by separating them with commas.

a {
  color: blue;
  background-color: yellow;
  transition: color 0.3s ease, background-color 0.5s linear;
}

a:hover {
  color: red;
  background-color: lightgreen;
}

What Properties Can Be Transitioned?

Not all CSS properties can have transition effects applied. Generally, properties that have intermediate values (like colors, lengths, percentages, numbers) are transitionable. For example, you can transition from color: red to color: blue because there are many intermediate color values. But you cannot transition from display: none to display: block because there is no intermediate state between them.

Common Transitionable Properties: color, background-color, opacity, transform, width, height, font-size, margin, padding, border-radius, box-shadow, etc.

Transitions are an integral part of modern web design, bringing lively and elegant interactions to websites in the simplest way.