CSS Transitions are the simplest way to create animations. They let you smoothly change CSS property values over a specified duration.

Basic Syntax

Define a transition on an element, then change the property (via hover, class change, etc.):

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

.button:hover {
  background: red;
}

When you hover, the background smoothly transitions from blue to red over 0.3 seconds.

Transition Properties

Property	Description
transition-property	Which CSS property to animate
transition-duration	How long the transition takes
transition-timing-function	The acceleration curve
transition-delay	Wait time before starting

transition-property

Specify which properties to transition:

.box {
  transition-property: background, transform;
}

Use all to transition every property that changes:

.box {
  transition-property: all;
}

transition-duration

Set the duration in seconds or milliseconds:

.box {
  transition-duration: 0.5s;  /* or 500ms */
}

transition-timing-function

Control the acceleration curve:

Value	Description
linear	Constant speed
ease	Slow start, fast middle, slow end (default)
ease-in	Slow start
ease-out	Slow end
ease-in-out	Slow start and end
cubic-bezier()	Custom curve

.box {
  transition-timing-function: ease-in-out;
}

transition-delay

Wait before starting the transition:

.box {
  transition-delay: 0.2s;
}

Shorthand

Combine all properties in one declaration:

.box {
  transition: property duration timing-function delay;
}

Example:

.box {
  transition: background 0.3s ease-in 0.1s;
}

Multiple Transitions

Transition multiple properties with different settings:

.box {
  transition:
    background 0.3s ease,
    transform 0.5s ease-out,
    opacity 0.2s linear;
}

Animatable Properties

Not all CSS properties can be transitioned. Common animatable properties include:

• background-color, color
• width, height, padding, margin
• transform
• opacity
• border-color, border-width
• box-shadow
• font-size

Example: Button Hover Effect

.button {
  background: #3498db;
  color: white;
  padding: 12px 24px;
  transform: scale(1);
  transition:
    background 0.3s ease,
    transform 0.2s ease;
}

.button:hover {
  background: #2980b9;
  transform: scale(1.05);
}

Performance Tips

For smooth animations, prefer transitioning these properties:

• transform
• opacity

These are GPU-accelerated and perform better than properties like width, height, or margin.

Lessons in this unit:

0:	Introduction
1:	How to Use CSS Transforms (2D and 3D)
2:	▶︎ How to Create Smooth CSS Transitions
3:	How to Create CSS Animations with Keyframes
4:	How to continuously rotate an image using CSS
5:	Compare the options for Animations on the Web