Advanced Features

CSS Transitions

Animate property changes smoothly between two states.

1Basic Syntax

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

Example Code

.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

.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

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

Finished reading?

Mark this topic as complete to track progress.

Box & Text Shadows

Next Topic

CSS Transforms