Smooth Property Changes

CSS transitions allow you to change property values smoothly over a given duration.

Transitions are triggered when a property value changes, typically on hover or focus.

/* Basic Transition */
.button {
  background: blue;
  transition: background 0.3s ease;
}

.button:hover {
  background: red;
}

/* Multiple Properties */
.box {
  width: 100px;
  height: 100px;
  transition: width 0.5s, height 0.5s, background 0.3s;
}

/* All Properties */
.element {
  transition: all 0.3s ease-in-out;
}

• transition-property - What to animate
• transition-duration - How long (0.3s, 500ms)
• transition-timing-function - Animation curve (ease, linear, ease-in-out)
• transition-delay - Wait before starting
• transition - Shorthand property

<button class="btn1">Hover Me</button>
<div class="box">Hover Over Me</div>