CSS Transitions

CSS Transitions

CSS transitions allow you to smoothly animate property changes over a specified duration. They make your website feel more polished and interactive.

Basic Transition

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

button:hover {
  background-color: red;
}

Transition Properties

• transition-property: Which property to animate (e.g., background-color, width, all)
• transition-duration: How long the transition takes (e.g., 0.3s, 500ms)
• transition-timing-function: How the transition progresses (ease, linear, ease-in, ease-out, ease-in-out)
• transition-delay: Delay before transition starts

Shorthand Syntax

/* Long form */
.element {
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

/* Shorthand */
.element {
  transition: background-color 0.3s ease 0s;
}

/* Multiple properties */
.element {
  transition: background-color 0.3s, width 0.5s, height 0.5s;
}

Timing Functions

• ease - Slow start, fast middle, slow end (default)
• linear - Constant speed
• ease-in - Slow start
• ease-out - Slow end
• ease-in-out - Slow start and end

Common Use Cases

• Hover effects on buttons and links
• Smooth color changes
• Size and position animations
• Opacity fades