Advanced Features

CSS Transitions

Animate property changes smoothly between two states.

1Basic Syntax

Specify which property to animate, the duration, and easing.

Example Code

css

.btn {
  background: #4f46e5;
  transition: background 0.2s ease;
}
.btn:hover { background: #4338ca; }

2Multiple Properties

Comma-separate transitions for different properties with different timing.

Example Code

css

.card {
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

3Easing Functions

Use keywords (ease, linear) or cubic-bezier() for custom curves.

Example Code

css

.modal {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

4Understand it in a real interface

A transition interpolates a property when its value changes between states. It does not define an ongoing sequence by itself. Target the properties you intend to animate instead of applying a transition to everything, which can produce unexpected movement when another style changes.

5Try it yourself

Give a button a short background-color transition and compare it with a transition on padding. Notice how the second can change surrounding layout. Add a reduced-motion alternative and make sure the button’s purpose and focus indicator remain clear without the effect.

Finished reading?

Mark this topic as complete to track progress.

Box & Text Shadows

Next Topic

CSS Transforms